清除浮动的方法

傷城~ 2022-03-21 05:25 269阅读 0赞

清除浮动的方法

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

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}   clear 清除

属性值 描述  
left 不允许左侧有浮动元素（清除左侧浮动的影响）  
right 不允许右侧有浮动元素（清除右侧浮动的影响）  
both 同时清除左右两侧浮动的影响

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

父级添加overflow属性方法

可以通过触发BFC的方式，可以实现清除浮动效果

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

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

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
    
     .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

代表网站： 百度、淘宝网、网易等

注意： content:"" 尽量不带点

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

使用方法：

.clearfix:before,.clearfix:after { 
      content:"";
      display:table;  /* 这句话可以出发BFC BFC可以清除浮动 */
    }
    .clearfix:after {
     clear:both;
    }
    .clearfix {
      *zoom:1;
    }

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 css清除浮动的方法

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

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

相关 CSS清除浮动方法

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

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

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

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

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

相关清除浮动的三种方法

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

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

相关 CSS清除浮动方法

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

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

相关清除浮动的方法

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

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

相关清除浮动的方法

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

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

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

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

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

相关浮动+清除浮动

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

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