css清除浮动的最好的方式和原因

心已赠人 2022-05-26 11:09 138阅读 0赞

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。  
不清浮动：  
![这里写图片描述][70]  
清浮动：  
![这里写图片描述][70 1]  
原理：  
（1） display:block使生成的元素以块级元素显示,占满剩余空间  
（2）height:0避免生成内容破坏原有布局的高度  
（3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互  
（4）通过 content:”.”生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的content:”.”有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的  
（5）zoom：1触发IE hasLayout。

<!DOCTYPE html>
    <html lang="zh">
      <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style> .box { width: 510px; border: #0000FF solid 1px; } .box:after { content: ""; visibility: hidden; display: block; height: 0; clear: both; } .left { float: left; width: 250px; height: 100px; background-color: green; } .right { float: left; width: 250px; height: 100px; background-color: red; } .backdiv{ width: 100px; height: 100px; background: #101010; margin-left: 510px; } </style>
      </head>
      <body>
        <div class="box">
          <div class="left"></div>
          <div class="right"></div>
        </div>
        <div class="backdiv"></div>
      </body>
    </html>

[70]: /images/20220526/b2bccc07d11b41509d6f51d7064255a3.png
[70 1]: /images/20220526/37b9071ca6734511bf24db5b7f1f38c5.png

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS 清除浮动的几种方式

CSS清楚浮动的几种方式：双伪元素（推荐）伪元素（不推荐）给父级添加 overflow:hiddle （不推荐）给后面浮动的元素添加一个空的 div

约定不等于承诺〃/ 2022年12月21日 13:57/ 0 赞/ 185 阅读

相关 CSS浮动——浮动的特性、清除浮动

CSS浮动一个页面基本包含了三种布局方式：标准流、浮动和定位浮动（float）浮动可以改变元素标签默认的排列方式，最典型的是可以让多个块级元素一行内排列显示

一时失言乱红尘/ 2022年11月22日 12:52/ 0 赞/ 270 阅读

相关 CSS中清除浮动的方式

什么是浮动？使元素脱离文档流（标准流），按照指定方式发生移动，遇到父级边界或者相邻的浮动元素就停下来的一种现象。 float:left|right|inherit|ini

小咪咪/ 2022年06月12日 03:59/ 0 赞/ 181 阅读

相关 CSS清除浮动的几种方式

浮动会脱离文档流，如果不清楚浮动，会对周围的元素造成影响。当元素浮动时，它将不再处于普通的文档流中，不占据空间。 `html和css代码` <div clas

港控/mmm°/ 2022年06月11日 03:42/ 0 赞/ 208 阅读

相关 css清除浮动的最好的方式和原因

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。不清浮动： ![这里写图片描述][70] 清浮动：

心已赠人/ 2022年05月26日 11:09/ 0 赞/ 139 阅读

相关 CSS清除浮动的几种方式

1.为父元素添加overflow：hidden <div style="overflow:hidden"> <img src="images/search.j

傷城~/ 2022年05月21日 09:34/ 0 赞/ 203 阅读

相关清除浮动的方式

1. 给父级定义height .parent { background-color: red; } .float-left {

逃离我推掉我的手/ 2022年04月22日 10:44/ 0 赞/ 167 阅读

相关 css 浮动清除的几种方式

css浮动清除的几种方式 1.在父级div中定义伪类此方法的优点适用于大多数浏览器，对于初学者首先理解起来有些困难，通常使用这种方法时需要见一个公共的类来清除浮动

谁践踏了优雅/ 2022年02月22日 02:52/ 0 赞/ 265 阅读

相关 css清除浮动好方法

1.clear:both ==>IE6,7会有高度，所以去高度需要.clear\{ clear:both; height:0px; margin:0; padding:0; w

拼搏现实的明天。/ 2021年12月24日 08:21/ 0 赞/ 251 阅读

相关 css清除浮动的原因和方法

css在设置浮动的时候，会脱离文档流，所谓的脱离文档流，就是将元素从普通的布局排版(上下左右)中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。更准确地一点

r囧r小猫/ 2021年09月16日 16:10/ 0 赞/ 264 阅读