摘要：如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
清除浮动：
在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。即父级对象盒子无法被撑开，这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
方法一：
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
那么问题来了，如何使用上面这段代码呢？
只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。
如：
class="head clearfix">
方法二：
直接在后面加上一个取消了浮动的空div：
方法三：
直接在父级元素加上overflow:hidden属性。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1459.html
摘要：为了实现这个效果，我们需要清除浮动。元素被向下移动用于清除之前的左右浮动。块格式化上下文对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个内的元素。且为了不影响接下来的文档标准流，往往也要收尾做出清除浮动。以下从浮动到BFC的段落 摘自MDN 网络开发者float 浮动float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流...
摘要：深入布局定位与浮动在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。定位后，原来在文档流中占据的位置，会被其他元素所占据。清除浮动的特殊应用清除浮动可以解决父元素高度塌陷问题。 深入css布局(2) — 定位与浮动 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深...
摘要：方法三据说是最高大上的方法方法注意作用于浮动元素的父亲先说原理这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用和来在元素内部插入两个元素块，从面达到清除浮动的效果。的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。 一、抛一块问题砖（display： block）先看现象： showImg(https://segmentfault.com/img/bVrWvS)...
摘要：那我们举个栗子当先声明一个元素向左浮动时，由于脱离文档流，这个元素的右边就会空出一片空间，空间的长宽与浮动元素长宽相同。总结总结下来，浮动与清除浮动的顺序关系如下设置元素浮动，元素脱离文档流，不计算高度。 本文主要探讨两个问题： 为什么CSS设置浮动会引起父元素塌陷 为什么设置clear:both能清除浮动，并撑开父元素。 起因 CSS的浮动，算是我在写网页时用的最多的属性之一。但...
阅读 1732·2021-09-27 14:02
阅读 2932·2021-09-27 13:36
阅读 1027·2019-08-30 12:46
阅读 1815·2019-08-30 10:51
阅读 3538·2019-08-29 17:02
阅读 915·2019-08-29 16:38
阅读 1808·2019-08-29 16:37
阅读 2936·2019-08-26 10:32
