摘要：元素浮动会让元素脱离文档流，从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。什么是浮动什么是浮动浮动元素脱离文档流并且向左或者向右移动，直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。允许浮动元素出现在两侧。
我们在平常做项目的时候，float这个css属性经常会用到。元素浮动会让元素脱离文档流，从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。
浮动元素脱离文档流并且向左或者向右移动，直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。
浮动元素会使得父级元素高度塌陷
html:
css:
* { // 实际项目中不要用通配符*去设置样式
margin: 0;
padding: 0;
}
ul {
border: 10px solid red;
}
li {
width: 100px;
height: 100px;
margin-left: 10px;
list-style: none;
background: orange;
float: left;
}效果图：
由于浮动元素脱离文档流，不再占据原来的文档流空间，不能撑开父级的内容，所以父级的高度就不存在了。
下面我们将介绍清浮动的两个大类。
在css中专门有一个来解决高度塌陷的属性，那就是我们常用的clear属性。clear的用法如下：
clear: none | right | left | both | inherit;
下面对clear值的解释来之w3c
我们清除浮动的时候常用clear: both;，注意： clear属性只对块级元素起作用。
下面展示一个与clear值为both有关的例子。
html:
css:
* {
margin: 0;
padding: 0;
}
li {
width: 100px;
height: 100px;
margin-left: 10px;
list-style: none;
background: orange;
float: left;
margin-bottom: 10px;
}
li:nth-child(3) {
clear: both;
}上面代码所渲染出来的效果是下面的图：
不知道当大家看到这个结果的时候，是不是开始怀疑w3c中的解释了。实际上clear值为both指的是让自身和前面的浮动元素不相邻。没错，是前面的，并不是前面后面都兼顾，所以上面的例子中展示的效果是两列而不是三列。
下面展示使用clear清浮动，接着最开始的代码，我们对其进行清浮动。(注意下面只展示在最开始代码中增加的代码)
css:
ul {
zoom: 1; // 为了兼容IE6/7
}
ul:after { // 内联
content: ""; // 内容为空字符是为了不影响本来的dom
display: block; // 这里的值也可以是table | list-item，只要能够让伪类成为块级元素。
clear: both;
}效果图：
BFC的全称block formatting context，中文意思是“块级格式化上下文”。
“css世界的结界”（引自张鑫旭的《css世界》），在这个结界中内部子元素不管如何变化都不会对外部的元素有影响。BFC元素的margin不会发生折叠，因为margin折叠影响外部元素的布局。清除浮动，如果BFC不能够清除浮动，那么BFC元素高度就会塌陷，那么内部的元素就会影响到其他的元素的布局，这跟前面说的BFC元素内部的子元素不会影响外部元素相违背。
BFC的实现：（引自张鑫旭的《css世界》）
css:
ul {
overflow: auto; // 使浮动元素的父级成为BFC就行可以实现清浮动
}效果如下图：
大家有可能会有疑问只要一句话实现BFC，那为什么我们还要用上面的clearfix方案？
overflow: auto;不支持IE6/7。overflow: hidden;不支持IE6，使用这个属性容器外的元素可能被隐藏。
但是，大家想下现在使用IE6/7/8的用户还有好多。我个人觉得现在我们没必要去管IE6/7/8，抛弃那部分用户对于我们的影响微不足道。上面这段话只是个人想法，并没有想过让他人必须这样想，如果大家对这段有什么不满请轻喷。
最后建议大家不要一味的使用clearfix方案。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/2303.html
摘要：方法三据说是最高大上的方法方法注意作用于浮动元素的父亲先说原理这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用和来在元素内部插入两个元素块，从面达到清除浮动的效果。的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。 一、抛一块问题砖（display： block）先看现象： showImg(https://segmentfault.com/img/bVrWvS)...
摘要：不会重叠浮动元素可以包含浮动我们可以利用的第三条特性来清浮动，这里其实说清浮动已经不再合适，应该说包含浮动。总而言之清理浮动两种方式利用属性，清除浮动使父容器形成 CSS清浮动处理（Clear与BFC）在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼 1 浮动带来布局的便利，却也带来了新问题 复制代码 1 2 3 4 ...
摘要：一目的要创建一个响应式页面右侧边栏为，左侧内容为。当窗口宽度小于时，上述在上，在下，随着窗口大小的变化，二者的与自动调整。移动到上面实现的效果如下图在窗口宽度小于时，右侧边栏内容在网页上方显示，不合格。 一、目的 要创建一个响应式页面： 右侧边栏为div.right-bottom，左侧内容为div.left-top。 当窗口宽度大于700px时，随着窗口大小的变化，div.right...
摘要：圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部浮动，但左右两栏加上负让其跟中间栏并排，以形成三栏布局。双飞翼布局，为了中间内容不被遮挡，直接在中间内部创建子用于放置内容，在该子里用和为左右两栏留出位置。（1）盒模型（普通盒模型、怪异盒模型） 1、元素的content（内容）、padding(内边距)、border（边框）、margin（外边距）构成了CSS盒模型 2、IE...
摘要：为什么要清除浮动影响其他元素定位父盒子高度为，子盒子全部浮动定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。清除浮动方法总结对父级元素设置高度对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置高度设置为内容高度。 为什么要清除浮动？ 1、影响其他元素定位父盒子高度为0，子盒子全部浮动、定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。 2.背景图片或颜...
阅读 2882·2021-09-22 15:20
阅读 2957·2021-09-22 15:19
阅读 3446·2021-09-22 15:15
阅读 2380·2021-09-08 09:35
阅读 2371·2019-08-30 15:44
阅读 3002·2019-08-30 10:50
阅读 3706·2019-08-29 16:25
阅读 1584·2019-08-26 13:55
