摘要：浮动在我看来浮动元素都是脱离了躯壳的灵魂，有其神而无其形没有高度，他们存在于世间，但世人却无法看见他们脱离文档流，块级元素可占据他们的位置，但是风雨等大自然因素却可以洞察到他们的存在，从而环绕其周围不脱离文本流，内联元素可环绕在其周围。
浮动
在我看来浮动元素都是脱离了躯壳的灵魂，有其神而无其形(没有高度)，他们存在于世间，但世人却无法看见他们（脱离文档流，块级元素可占据他们的位置），但是风雨等大自然因素却可以洞察到他们的存在，从而环绕其周围（不脱离文本流，内联元素可环绕在其周围）。
浮动元素的外边距不会合并
浮动非替换元素时必须设定宽度
浮动元素会脱离文档流但不会脱离文本流，因而会造成文本环绕效果，而这也是浮动的本意。
不管是块级元素还是内联元素，一旦浮动就会变成行内块元素（即display: inline-block;）
如果浮动元素应用了负外边距而导致其与相邻元素重叠，分两种情况：
行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示
块框与一个浮动元素重叠时，其边框和背景都在该浮动元素之下显示，而内容在浮动元素之上显示
清除浮动浮动父元素上面提到过浮动元素是不具备高度的，因此会造成父元素高度塌陷，可以通过以下方法来清除浮动。不仅要知道什么方式可以清除浮动，更要知道这些方法是如何清除浮动的。
CSS 2.1中提到了浮动的一个特性：浮动元素会延伸，从而包含其所有后代元素。但这有点拆了东墙补西墙的意味，不推荐。
应用对象：父元素
overflow 属性本意是规定了当内容溢出元素框时发生的事情。但当其属性值为hidden或auto时，它会自动的清理包含的任何浮动元素，也就意味着它是认可浮动元素的高度的。但在某些情况下，使用该方法会产生滚动条或截断内容。所以使用时需谨慎。
应用对象：父元素
clear属性会给该元素添加足够的外边距，从而达到清除浮动的效果。clear 属性的值可以是：left、right、both或none。
应用对象：相邻元素
在没有现成元素可以应用clear属性时，我们可以使用伪元素：
.clearfix::after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
注：after 会在元素内容后面而不是元素后面插入一个伪元素。
应用对象：父元素
当然，我们也可以直接在浮动元素后面添加一个空元素，如下：
同样可以达到清除浮动的效果，但会增加不必要的代码，不推荐。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111594.html
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。 除了用浮动外，目前暂无其他方法实现文本环绕 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); 再来看看浮动的具体定义： 浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不...
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。 除了用浮动外，目前暂无其他方法实现文本环绕 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); 再来看看浮动的具体定义： 浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不...
摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。 我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念： 浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]； 文档流：在文档流中，块元素会单个元素独占一行 接下来我们通过实...
摘要：清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。 我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念： 浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]； 文档流：在文档流中，块元素会单个元素独占一行 接下来我们通过实...
阅读 2369·2021-11-25 09:43
阅读 1629·2021-09-22 15:26
阅读 3155·2019-08-30 15:56
阅读 1518·2019-08-30 15:55
阅读 1684·2019-08-30 15:54
阅读 673·2019-08-30 15:52
阅读 2984·2019-08-29 16:23
阅读 777·2019-08-29 12:43
