补充: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表示横居中,竖不居中。
补充::nth-of-type(n)
选择器
- 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
- n 可以是数字、关键词或公式。
- 在MDN的浮动的双列表或三列表的例子中我们用到了这个选择器。
1
2
3
4div:nth-of-type(1) {
width: 48%;
float: left;
} - 上面这个例子是选择了父元素的第一个div子元素。(注意:不是div的第一个子元素,是第一个div元素!!)
- 更多用法
浮动(float属性)
- 属性值有left、right。
- 注意:如果是三列浮动,前面两列最好指定left,第三列指定right。如果第二列和第三列都指定right,那么第二列会显示在最右边,而第三列会显示在中间,因为第二列源代码顺序上比第三列等级要高 (DOM上第二列先出现并声明了float: right;) ,所以在浮动顺序上也会比第三列等级要高。又因为两者同时像右浮动,所以第二列就会更加地靠右。
- 参考MDN浮动
- Float 可用于实现文字环绕图片,如下:
1
2
3
4img {
float: right;
margin: 0 0 1em 1em;
}
清除浮动( clear 属性)
- 如果不清楚浮动,所有在浮动下面的自身不浮动的内容都将围绕浮动元素,在最长的列旁边环绕着。
- 清除浮动原理:通过在浮动元素的末尾添加一个空元素,设置 clear:both属性。
clear 属性值 | 含义 |
---|---|
left | 停止任何活动的左浮动 |
right | 停止任何活动的右浮动 |
both | 停止任何活动的左右浮动 |
- 当你把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 | .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } |
::after
的意思是在.clearfix
内部的最后加入伪元素::after
- 首先要显示伪元素,所以
display:block
- 然后为伪元素加入空内容,以便伪元素中不会有内容显示在页面中,所以,
content:"";
(.
也可以,只要加上visibility:hidden;
) - 其次,为使伪元素不影响页面布局,将伪元素高度设置为0,所以,
height:0
- 最后,要清除浮动,所以,
clear:both
。 - after伪元素其实是通过 content 在元素的后面生成了内容为一个点的块级元素。这样一来只要设置这两个非浮动元素之间的距离就行了。
注意及时清除浮动元素
- 我们在文章中建立的简单例子很容易理解,但是当布局变得更加复杂时清理(clearing)也会变得更加复杂。你需要确保所有的浮动都能尽快清除,以避免它们给下方的内容制造麻烦。如果没有一个方便的容器来进行清理,那么在必要的时候使用clearfix块。
使用overflow属性防止浮动的图片溢出容器
- 浮动的元素存在于正常的文档布局流之外,在某些方面的行为相当奇怪,比如,他们在父元素中所占的面积的有效高度为0(高度塌陷)。此时就要使用overflow属性让浮动的图片可以被包含在其他元素里面了。
- overflow属性值
- 例子中图片比包含它的元素还高, 而且它是浮动的,于是它就溢出到了容器外面。
- 例子:
1
2
3img {
float: right;
} - 解决方法:给包含图片的元素增加overflow属性
1
2
3.clearfix {
overflow: auto;
} - 如果你想要支持IE6,你就需要再加入如下样式:
1
2
3
4.clearfix {
overflow: auto;
zoom: 1;
}
浮动项目的背景高度
- 浮动的元素存在于正常的文档布局流之外,在某些方面的行为相当奇怪,比如,他们在父元素中所占的面积的有效高度为0(高度塌陷)。
- 不同列的高度不同会不太美观。
- 可以使用overflow属性使得浮动元素的内容滚动来解决浮动元素的高度问题。
参考解决方法:
- Flexbox可以自动地延长列,这样他们就会像最长的一列一样。(具体用法可看下一篇笔记)
- 将这些列的背景颜色设置为父元素的背景颜色,这样您就不会看到高度是不同的。这是目前最好的选择。
- 将它们设置为固定的高度(height),并使内容滚动(overflow属性)。
问题
- 关于闭合浮动与清除浮动(所以应该是闭合还是清除呢?)
- 其实我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮动,在footer上设置clear:both清除浮动并不能解决warp高度塌陷的问题。