1 浮动
- 浮动是让元素脱离文档流,浮动前后的非定位元素会无视浮动元素,可能沿着元素另一侧垂直流动。
- 浮动元素会生成一个块级框,具有块级元素的特性,但是不占整行。
- 浮动元素脱离了文档流,无法为文档流中的父元素撑起高度,造成父盒子塌陷的问题。
2 清除浮动
clear:left
左侧不允许浮动元素clear:right
右侧不允许浮动元素clear:both
两侧不允许浮动元素
3 清除浮动的技巧
- 添加一个空的div + clear:both清除浮动,添加了无意义的html代码
- 给父元素添加overflow:hidden,父元素本身形成一个BFC,BFC可以包裹浮动流,BFC中浮动元素的高度也被计算在内,可以实现清除浮动,但是无法显示溢出的元素。
- 给父元素设置伪元素清除
.clearfix::after {content: '';display: block;clear: both;height: 0;visibility: hidden; } .clearfix{*zoom: 1 /*兼容IE 会触发haslayout*/ /*haslayout是IE浏览器引擎的一个组成部分,在IE中,一个元素要么根据自身内容进行布局,要么根据父元素进行布局。haslayout=“true”,元素会根据自身的内容去调整大小,而非依赖父元素去渲染自己。haslayout = “false”,该元素会依赖于父元素渲染自己。*/ }