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

补充:margin:auto;margin: 0 auto;

  1. 意思不同。
    margin:auto=margin:auto auto auto auto,表示上下左右都为auto;
    margin:0 auto=margin:0 auto 0 auto,表示上下为0,左右为auto;
  2. 居中方式不同。
    margin:auto表示横竖都居中。
    margin: 0 auto表示横居中,竖不居中。

补充::nth-of-type(n) 选择器

  • 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
  • n 可以是数字、关键词或公式。
  • 在MDN的浮动的双列表或三列表的例子中我们用到了这个选择器。
    1
    2
    3
    4
    div: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
    4
    img {
    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
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块。

使用overflow属性防止浮动的图片溢出容器

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

浮动项目的背景高度

  • 浮动的元素存在于正常的文档布局流之外,在某些方面的行为相当奇怪,比如,他们在父元素中所占的面积的有效高度为0(高度塌陷)。
  • 不同列的高度不同会不太美观。
  • 可以使用overflow属性使得浮动元素的内容滚动来解决浮动元素的高度问题。

参考解决方法:

  1. Flexbox可以自动地延长列,这样他们就会像最长的一列一样。(具体用法可看下一篇笔记)
  2. 将这些列的背景颜色设置为父元素的背景颜色,这样您就不会看到高度是不同的。这是目前最好的选择。
  3. 将它们设置为固定的高度(height),并使内容滚动(overflow属性)

问题

  • 关于闭合浮动与清除浮动(所以应该是闭合还是清除呢?)
  • 其实我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮动,在footer上设置clear:both清除浮动并不能解决warp高度塌陷的问题。

,