清除浮动的8中方法

落日映苍穹つ 2021-09-01 08:02 374阅读 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 条评论，374人围观）

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

相关阅读

相关 css为何要清除浮动及清除浮动的方法

一：css为何要清除浮动 1.很多情况下，如果我们使用了float特效，出现margin，padding设置不能正确显示，浮动会导致父级子级之间设置了padding，导致了

古城微笑少年丶/ 2023年07月24日 09:15/ 0 赞/ 30 阅读

相关 css清除浮动的方法

1.额外标签法在浮动元素末尾添加一个空标签(必须是块级元素)，如 < div style=“clear: both”></ div> 不推荐，添加无意义的标签，碍

刺骨的言语ヽ痛彻心扉/ 2023年06月14日 06:26/ 0 赞/ 27 阅读

相关 CSS清除浮动方法

1、在浮动元素后面添加一个空的标签，并且让这个标签样式为：clear:both; 2、父元素直接设置一个高度，放置子元素高度超过父元素高度，无法正常显示 3、父元素over

红太狼/ 2023年06月09日 13:22/ 0 赞/ 31 阅读

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

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

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

相关 CSS清除浮动方法

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

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

相关清除浮动的方法

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

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

相关清除浮动的方法

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

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

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

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

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

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

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

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

相关清除浮动的8中方法

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

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