css 清除浮动


清除浮动

让浮动的子元素撑开父级元素的高度

 

方案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

(0)
上一篇 2022年9月11日 22:39
下一篇 2022年9月11日 22:39

相关推荐

发表回复

登录后才能评论