清除浮动
让浮动的子元素撑开父级元素的高度
方案1
给父元素设置高度。(缺点:父元素高度无法自适应)
方案2
给父级元素开启BFC。浮动盒子的特点和定位盒子的特点:高宽都由内容撑开(缺点:ie6,ie7没有BFC,不起作用)
overflow:hidden
定位
浮动
方案3
br标签的clear属性清浮动(缺点:ie6不起作用,违反了结构 行为 样式相分离的原则)
<br clear="all">
方案4
空标签清浮动(注意,上面使用的是标签的属性,这里使用的是css样式,性质不同)(ie6.ie7 空标签div会存在最小高度问题,违反了结构 行为 样式相分离的原则)
<div style="clear:both"></div>
方案5
父元素 开启haslayout + 设置伪元素 清除浮动(主流)
/* 开启haslayout */ .fatherClass { *zoom: 1; } /* ie6,7不支持伪元素 */ .fatherClass:after { content: ''; display: block; clear: both; }
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/288863.html