百度前端技术学院第五天学习笔记（CSS浮动）

十月 24, 2019 CSS学习, 百度前端技术学院本文总阅读量次

补充：`margin:auto;`与`margin: 0 auto;`

意思不同。
margin:auto=margin:auto auto auto auto，表示上下左右都为auto；
margin:0 auto=margin:0 auto 0 auto，表示上下为0，左右为auto；
居中方式不同。
margin:auto表示横竖都居中。
margin: 0 auto表示横居中，竖不居中。

在MDN的浮动的双列表或三列表的例子中我们用到了这个选择器。

div:nth-of-type(1) {
            width: 48%;
            float: left;
        }

属性值有left、right。
注意：如果是三列浮动，前面两列最好指定left，第三列指定right。如果第二列和第三列都指定right，那么第二列会显示在最右边，而第三列会显示在中间，因为第二列源代码顺序上比第三列等级要高 (DOM上第二列先出现并声明了float: right;) ，所以在浮动顺序上也会比第三列等级要高。又因为两者同时像右浮动，所以第二列就会更加地靠右。
参考MDN浮动

Float 可用于实现文字环绕图片，如下：

img {
  float: right;
  margin: 0 0 1em 1em;
}

当你把clear 属性应用到一个元素上时，它主要意味着”此处停止浮动”,这个元素和源码中后面的元素将不浮动，除非您稍后将一个新的float声明应用到此后的另一个元素。
注意及时清理浮动，必要时增加clearfix块。（不推荐使用）<div class="clearfix"></div>来设定.clearfix {clear: both;}使得自他以后的元素都清除浮动。

建议使用::after 伪元素来清除浮动：

1 2	.clearfix::after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }

::after 的意思是在.clearfix内部的最后加入伪元素::after
首先要显示伪元素，所以display:block
然后为伪元素加入空内容，以便伪元素中不会有内容显示在页面中，所以， content:""；(.也可以，只要加上visibility:hidden;)
其次，为使伪元素不影响页面布局，将伪元素高度设置为0，所以， height:0
最后，要清除浮动，所以，clear:both。
after伪元素其实是通过 content 在元素的后面生成了内容为一个点的块级元素。这样一来只要设置这两个非浮动元素之间的距离就行了。

在上面的例子中三列浮动没什么问题，但给这些框加上样式时，比如添加背景、外边距、内边距等等，就有可能出现由于内边距和边界引入的额外宽度，一行容纳不下三列了，因此第三列下降到另外两列之下的情况。
解决问题的方法：通过box-sizing更改盒模型为替代盒模型来保证增加内边距或边界的宽度时，不会使盒子更宽，而是会使内容调整得更窄。
1
2
3
* {
box-sizing: border-box;
}
这里要注意的另一小点是，box-sizing 出现可以追溯到Internet Explorer 8，如果明确需要支持较老的浏览器，可能需要手动调整列的宽度，以允许内边距和边界宽度。

使用::after 伪元素(利用::after在元素内部插入元素块，从而达到清除浮动的效果)：

1 2	.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }

::after 的意思是在.clearfix内部的最后加入伪元素::after
首先要显示伪元素，所以display:block
然后为伪元素加入空内容，以便伪元素中不会有内容显示在页面中，所以， content:""；(.也可以，只要加上visibility:hidden;)
其次，为使伪元素不影响页面布局，将伪元素高度设置为0，所以， height:0
最后，要清除浮动，所以，clear:both。
after伪元素其实是通过 content 在元素的后面生成了内容为一个点的块级元素。这样一来只要设置这两个非浮动元素之间的距离就行了。

我们在文章中建立的简单例子很容易理解，但是当布局变得更加复杂时清理（clearing）也会变得更加复杂。你需要确保所有的浮动都能尽快清除，以避免它们给下方的内容制造麻烦。如果没有一个方便的容器来进行清理，那么在必要的时候使用clearfix块。

浮动的元素存在于正常的文档布局流之外，在某些方面的行为相当奇怪，比如，他们在父元素中所占的面积的有效高度为0（高度塌陷）。此时就要使用overflow属性让浮动的图片可以被包含在其他元素里面了。
overflow属性值
例子中图片比包含它的元素还高，而且它是浮动的，于是它就溢出到了容器外面。
例子：
1
2
3
img {
float: right;
}
解决方法：给包含图片的元素增加overflow属性
1
2
3
.clearfix {
overflow: auto;
}
如果你想要支持IE6，你就需要再加入如下样式：
1
2
3
4
.clearfix {
overflow: auto;
zoom: 1;
}

参考解决方法: