「CSS」常见的清除浮动方法

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，浮动元素会造成父元素高度塌陷，所以当我们设置float后，需进行相应的清除浮动操作。

方法一：创建BFC

BFC的全称为 Block Formatting Context，即块级格式化上下文。一个BFC有如下特性：

处于同一个BFC中的元素相互影响，可能会发生margin collapse（高度塌陷）；
BFC在页面上是一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，包括浮动元素也参与计算；
浮动盒的区域不会叠加到BFC上。

创建BFC的方法如下：

浮动（float的值不为none）；
绝对定位元素（position的值为absolute或fixed）；
行内块（display为inline-block）
表格单元（display为table、table-cell、table-caption等HTML表格相关属性）；
弹性盒（display为flex或inline-flex）；
overflow不为visible。

方法二：额外标签

在浮动的盒子之下再放一个标签，在这个标签中使用clear: both;，来清除浮动对页面的影响。
缺点：这种清除浮动的方式会增加页面的标签，造成结构的混乱。

方法三：使用伪元素

    <style>.parent:after{      /*伪元素是行内元素 正常浏览器清除浮动方法*/content: "";display: block;clear:both;}</style><body><div class="parent"><div class="son"></div></div>
</body>

「CSS」常见的清除浮动方法相关推荐

触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
一、css清除浮动方法学习笔记总结（超详细，简单易懂）
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动? 我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上. 在 CSS ...
CSS高度塌陷问题-清除浮动
对于一个元素来说,如果他设置了浮动,则就会转化为块元素类型,可以设置width,height等.但是浮动会使元素脱离正常文档流,如果浮动元素的高度大于父元素的高度,则会使得浮动元素脱离父元素,也就是我 ...
几种常用的清除浮动方法(一)
From: https://www.cnblogs.com/nxl0908/p/7245460.html 1.父级div定义伪类:after和zoom <style type="tex ...
css .clearfix,谈谈CSS之关于clearfix清除浮动
原标题:谈谈CSS之关于clearfix清除浮动在网上要是你随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix" ...
局域网arp攻击_「网络安全」常见攻击篇（23）——ARP攻击
什么是ARP攻击? ARP攻击是利用ARP协议设计时缺乏安全验证漏洞来实现的,通过伪造ARP数据包来窃取合法用户的通信数据,造成影响网络传输速率和盗取用户隐私信息等严重危害. ARP攻击原理 ARP病 ...
php里清除浮动代码,CSS中使用clearfix清除浮动的方法
首先在很多很多年以前我们常用的清除浮动是这样的. CSS Code复制内容到剪贴板 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码 ...
CSS为何清除浮动以及清除浮动方法总结
文章目录一,浮动布局的注意点二,为什么需要清除浮动? 三,清除浮动的本质四,清除浮动的方法 1. 额外标签法(隔墙法) 2.父元素overflow 3.after伪元素清除 4.双伪元素清除浮动 ...

「CSS」常见的清除浮动方法

方法一：创建BFC

方法二：额外标签

方法三：使用伪元素

「CSS」常见的清除浮动方法相关推荐

最新文章

热门文章