欢迎光临
我们一直在努力

CSS | 9种清除浮动的方法

浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。


为什么要清除浮动?

清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题
当父元素不给高度的时候,内部元素不浮动时会撑开,而浮动的时候,父元素变成一条线

clear:both:在左右两侧均不允许浮动元素。本质就是闭合浮动, 就是让父盒子闭合出口和入口,不让子盒子出来

clear:left | right | both | none | inherit:元素的某个方向上不能有浮动元素 

如果我们清除了浮动,父元素自动检测子盒子最高的高度,然后与其同高。

高度塌陷:如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零

解决方法:

1.父级div定义伪类:after和zoom

原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题

缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.

<div>
    <div class="div1 clearfloat">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="div2">
        div2
    </div>
</div>
 
<style type="text/css">
    .div1{background:#000080;border:1px solid red;}
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
 
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
 
    /*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
    .clearfloat{zoom:1}
</style>

2.使用before和after双伪元素清除浮动

<div>
    <div class="div1 clearfloat">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="div2">
        div2
    </div>
</div>
 
<style type="text/css">
    .div1{background:#000080;border:1px solid red;}
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
 
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
 
    /*清除浮动代码*/
    .clearfloat:after, .clearfloat:before {content: ""; display: table;}
    .clearfloat:after {clear: both;}
    .clearfloat {*zoom: 1;}
</style>

3.在结尾处添加空div标签clear:both
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
缺点:如果页面浮动布局多,就要增加很多空div,让人感觉很不爽, 缺点:添加无意义标签,语义化差

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
<div class="div2">
    div2
</div>
 
<style type="text/css">
    .div1{background:#000080;border:1px solid red}
    .div2{background:#800080;border:1px solid red;height:100px; }
 
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
 
    /*清除浮动代码*/
    .clearfloat{clear:both}
</style>

4.父级div定义height
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题 
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 建议:不推荐使用,只建议高度固定的布局时使用

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>
 
<style type="text/css">
    .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
    .div2{background:#800080;border:1px solid red;height:100px; }
 
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>

5.父级div定义overflow:hidden 通过触发BFC方式,实现清除浮动

内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度  

缺点:不能和position配合使用,因为超出的尺寸的会被隐藏 建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用


<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>
 
<style type="text/css">
    .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
    .div2{background:#800080;border:1px solid red;height:100px; width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style

6.父级div定义overflow:auto

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度     

缺点:内部宽高超过父级div时,会出现滚动条。建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。


<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div>
 
<style type="text/css">
    .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
    .div2{background:#800080;border:1px solid red;height:100px; width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>

7.父级div也一起浮动
原理:所有代码一起浮动,就变成了一个整体 优点:没有优点
缺点:会产生新的浮动问题。建议:不推荐使用,只作了解。

<div class="div1"> 
  <div class="left">Left</div> 
  <div class="right">Right</div>
</div>
<div class="div2">
   div2
</div>
<style type="text/css">
    .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;float:left}
    .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}
 
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>

8.父级div定义display:table
原理:将div属性变成表格 优点:没有优点 缺点:会产生新的未知问题 建议:不推荐使用,只作了解

<div class="div1"> 
  <div class="left">Left</div> 
  <div class="right">Right</div>
</div>
<div class="div2">
   div2
</div>
 
<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;}
   .div2{background:#800080;border:1px solid red;height:100px;width:98%;}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
</style> 

9.结尾处加br标签clear:both


<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <br class="clearfloat"/>
</div>
<div class="div2">
    div2
</div>
 
<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;zoom:1}
   .div2{background:#800080;border:1px solid red;height:100px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   .clearfloat{clear:both}
</style> 
赞(1) 打赏
未经允许不得转载:散人研 » CSS | 9种清除浮动的方法
分享到: 更多 (0)

评论 抢沙发

3 + 8 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏