在页面布局中经常会用到浮动和清除浮动的操作,但之前是知其然而不知其所以然,看过多篇文章后,有了一些深入的了解,特整理下来!
浮动的目的:
最初设计浮动的目的是为了实现文字等内容可围绕图像显示,后来发现浮动方便布局,所以支持浮动任何元素,元素设置浮动后,会脱离原先文档的普通流中,让原先各自占据一行的块元素在一行显示,代码展示如下:
.content{
border: 2px solid #afed11;
margin: 100px 600px;
}
.a{
width: 100px;
height: 200px;
background-color: red;
}
.b{
width: 100px;
height: 100px;
background-color:blue;
}
不设置浮动显示如下
如果只设置a块floagt:left:结果如下:
a块脱离了原先的文档普通流,不再占据原先的位置,所以b移移动到原先a的位置,因为a是浮动的,所以会遮挡住b,因为父元素没有设置高度,所以父元素的高度由子元素决定,现在为b的高度,a浮动后,超出了父元素的高度。
现在把b块也设置floagt:left,就实现了2个块状元素在一行显示:
现在看到虽然实现了2个块状元素在一行显示,但是父元素的高度现在为0,会影响到兄弟元素的排版,所以我们现在要解决这个问题,就用到了清除浮动的操作
清除浮动的方法
清除浮动后正常的显示如下图:
1、在父元素高度固定的情况下,可以直接设置父元素的高度height: 200px即可正常显示
2、增加块元素,用clear:both清除
.clear{
clear: both;
}
clear:both是清除此元素左右2边的浮动,所以此元素会独占一行,在a、b的下一行,但clear仍然在文档流中,必须包含在父元素内,所以父元素为了包含clear,只能增加高度,最终的效果就达到了高度被撑起来。
用这种方法清除浮动,会为文档中增加不必要的结构,不推荐。
3、 给父元素设置overflow清除浮动
.content{
border: 2px solid #afed11;
margin: 100px 600px;
overflow: auto;
}
overflow值可以是除visible之外的任何值,都能达到撑起高度的效果,但是scroll是导致滚动条始终存在,hidden会隐藏超出边框的部分,所以在选择的时候要格外注意
为什么overflow会实现这种效果呢?是因为它是一个块级格式化上下文 (Block Fromatting Context),W3C对BFC的定义如下:
浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。
BCF可以包含浮动元素,所以能实现撑起高度的效果。
4、使用after伪类
.clear{zoom:1}
.clear:after{
content:'';
height: 0;
display: block;
clear:both;
}
跟第2个方法原理类似,只是区别在于:clear在html中插入一个div.clear标签,而content 利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
以上是常用的几种方法,可以根据场景的不同选择适合的。