清除浮动的8中方法

落日映苍穹つ 2021-09-01 08:02 291阅读 0赞

###          1：给父级定义height 高度固定的布局 ###

###             2：外墙法 结尾处加空div标签 clear:both(不推荐) 缺点：过于添加多余的div ###

###      3：父级div定义 伪类:after 和 zoom(推荐) ###

<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> 
    <div class="div1 clearfloat"> 
    <div class="left">1</div> 
    <div class="right">2</div> 
    </div> 
    <div class="div2"> 
    div2 
    </div>

###      4: 父级div定义 overflow:hidden 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。  ###

###      5:  父级div定义 overflow:auto   缺点：内部宽高超过父级div时，会出现滚动条。         6: 父级div 也一起浮动 float:left 缺点：会产生新的浮动问题。  ###

###      7: 父级div定义 display:table   缺点：会产生新的未知问题。  ###

###      8: 内墙法在第一个盒子结尾处增加一个div然后添加clear:both  建议：不推荐使用，只作了解。 ###

发表评论取消回复

表情：

评论列表（有 0 条评论，291人围观）

还没有评论，来说两句吧...

相关阅读

相关清除浮动有哪些方法？为什么要清除浮动？

什么是清除浮动？清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。为什么要清除浮动？ 1. 导致背景不能正常显示，如果对父级设置了背景属性，导致父级不

迈不过友情╰/ 2023年01月18日 13:24/ 0 赞/ 144 阅读

相关清除浮动的三种方法

CSS清除浮动的方法有哪些呢？经常性地会使用到float，很多邪门的事儿都有可能是浮动在作怪，清除浮动是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良

深碍√TFBOYSˉ_/ 2022年09月23日 08:54/ 0 赞/ 147 阅读

相关 CSS清除浮动方法

什么是CSS清除浮动？在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的

痛定思痛。/ 2022年06月16日 07:19/ 0 赞/ 230 阅读

相关清除浮动的方法

> 1.额外标签法 > 2.使用:after伪元素 > 3.给父元素定高 > 4.利用overflow：hidden;属性 > 5.父元素浮动 > 6.父元

分手后的思念是犯贱/ 2022年06月09日 06:19/ 0 赞/ 177 阅读

相关 CSS清除浮动大全共8种方法

在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了，下面总结8种清除浮动的方法，测试已通过 ie chrome firefox opera，需要的朋友可以参考下清除

亦凉/ 2022年05月28日 00:10/ 0 赞/ 101 阅读

相关清除浮动的方法

清除浮动的方法其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。在CSS中，clear属性用于清除

傷城~/ 2022年03月21日 05:25/ 0 赞/ 214 阅读

相关 CSS清除浮动的8种方法

1.父级div定义 height <style type="text/css"> .div1{background:000080;border:1px

秒速五厘米/ 2022年02月24日 10:20/ 0 赞/ 200 阅读

相关四、浮动、清除浮动的方法（重点）

1、额外标签法(隔墙法) 在最后一个浮动的标签后面添加一个没有空的div . clear { clear:both; } 2、

女爷i/ 2022年02月23日 09:48/ 0 赞/ 198 阅读

相关浮动+清除浮动

界面布局 1.企业开发中什么时候使用标准流什么时候使用浮动流？垂直方向使用标准流，水平方向使用浮动流。 2.拿到一个很复杂的界面如何入手？从上至下布局、从

待我称王封你为后i/ 2021年10月30日 06:54/ 0 赞/ 477 阅读

相关清除浮动的8中方法

1：给父级定义height 高度固定的布局 2：外墙法结尾处加空div标签 clear:both(不推荐) 缺点：过于添加多

落日映苍穹つ/ 2021年09月01日 08:02/ 0 赞/ 292 阅读