码迷,mamicode.com
首页 > 其他好文 > 详细

清除浮动的方法?

时间:2020-04-17 18:33:41      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:dde   行高   after   line   height   pre   文本   bsp   family   

(1)给父级元素单独定义高度(height)

(2)在标签结尾处加空div标签 clear:both

.clear{clear: both;}

<div class="box">

       <div class="red">1</div>
       <div class="sienna">2</div>
       <div class="blue">3</div>
       <div class="clear"></div>
 </div>

(3)父级div定义 overflow:hidden

使用伪元素来清除浮动(:after,注意:作用于浮动元素的父亲)

主要推荐使用这种方法清除浮动

.clearfix:after{
          content:"";/*设置内容为空*/
          height:0;/*高度为0*/
          line-height:0;/*行高为0*/
          display:block;/*将文本转为块级元素*/
          visibility:hidden;/*将元素隐藏*/
          clear:both;/*清除浮动*/
      }
     .clearfix{
          zoom:1;/*为了兼容IE*/
     }

 <body>

<div class="box clearfix">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>

 </body>

(4)使用双伪元素清除浮动

.clearfix:before,.clearfix:after {
     content: "";
     display: block;
     clear: both;
}
.clearfix {
     zoom: 1;
 }

清除浮动的方法?

标签:dde   行高   after   line   height   pre   文本   bsp   family   

原文地址:https://www.cnblogs.com/HYTing/p/12721635.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!