css,css清除浮动,CSS技巧
您的位置: 主页 > web前端文章 > css >

CSS通过overflow清除浮动【访问量:89】

CSS:溢出清除浮动

使用基于浮动的布局进行编码时,我们遇到的一个常见问题是,包装容器不会展开到子浮动元素的高度。解决这个问题的典型解决方案是在浮动元素之后添加一个具有清除浮动元素的元素,或者向包装器添加一个clearfix。但是你是否知道你也可以使用overflow属性来解决这个问题?这也不是一个新的CSS技巧。它被记录在案前 长 很长前。今天,我想重温这个话题以及一些提示。

演示1: 下面的演示显示了父容器不扩展的浮动子元素的问题。要解决这个问题,你可以简单地将CSS属性overflow:auto(或overflow:hidden)添加到包装容器中。这也许是清除花车最简单的方法。

overflow-auto.png

.container {
	overflow: auto;
}

演示2: 溢出:auto也可用于防止内容缠绕浮动元素。假设您正在设计评论列表。您很可能会在左侧显示一个头像,并在右侧显示评论。为防止评论包装在化身中,只需添加overflow:隐藏到评论容器中。这里使用溢出的优点是我不必为注释容器设置浮点或宽度。容器在浮动的化身图像之后自动对齐。

overflow-auto-2.png

.image {
float: left;
}

.text {
overflow: hidden;
}

缺点 虽然清除浮游物是一个很好的技巧,但还是有一些缺点: 如果您的内容正在扩展容器的边界,则使用overflow:auto会导致滚动条。例如,如果你有一个长的不破裂的文本(即长URL文本)或一个大的图像,那么它将显示一个滚动条的容器。 为了避免显示滚动条,你应该使用overflow:hidden。同样,这种方法也有一个缺点。使用overflow:hidden将隐藏任何超出容器边界的内容。 自动换行 要解决长时间不间断的文本问题,只需在容器中添加单词换行:分词,并强制文本换行。

.container img {
max-width: 100%;
height: auto;
}

最大宽度 要防止大图像扩展边界,请添加最大宽度:100%,并将图像调整为容器的最大宽度。

.container {
word-wrap: break-word;
}


2018-04-04
匿名评论