CSS第四天-浮动


浮动(float):

属性名效果
float:left左浮动
float:right右浮动
  • 让垂直布局的盒子变成水平布局
  • 浮动的元素不能通过text-align:center或者margin:0 auto,让浮动元素本身水平居中

伪元素:

::before在父元素内容的最前添加一个伪元素
::after在父元素内容的最后添加一个伪元素

伪元素:一般页面中的非主体内容可以使用伪元素

  1. before 在元素里面的最前面添加
  2. after 在元素里面的最后面添加
  3. content 必写属性
  4. 伪元素添加进来是一个类似行内元素

清除浮动:

1、在标准流的情况下,子元素的高度是可以撑开父元素的

2、一旦子元素浮动了,那么父元素就检测不到子元素,从而导致父元素高度为0

3、那么此时我们就需要清除浮动,让子元素可以把父亲撑开

清除浮动的方法:
  1. 第一种:clear: both;
  2. 第二种:给父元素设置overflow:hidden 因为触发BFC
  3. 第三种:.clearfix::after —谁因为浮动没有高度了,就把这个类名给谁
  4. 第四种:双伪类元素 ::before—::after
  5. ie6/7兼容问题—*zoom:1;
方法优点缺点
直接设置父元素高度优点简单粗暴,方便缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块
额外标签法在父元素内容的最后添加一个块级元素。给添加的块级元素设置 clear:both会在页面中添加额外的标签,会让页面的HTML结构变得复杂
单伪元素清除法项目中使用,直接给标签加类即可清除浮动操作:用伪元素替代了额外标签
双伪元素清除法项目中使用,直接给标签加类即可清除浮动
给父元素设置overflow : hidden方便操作:直接给父元素设置 overflow : hidden
1
2
3
4
5
6
7
.box::after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}

结构伪类选择器:

选择器说明
:first-child找到父元素的第一个子元素
:last-child找到父元素的最后一个子元素
:nth-child(n)找到父元素第n个子元素
:nth-last-child(n)找到父元素中倒数第n个子元素
:nth-of-type(n)找到父元素的子元素固定死
  1. 减少对于HTML中类的依赖,有利于保持代码整洁
  2. :nth-of-type → 先通过该 类型 找到符合的元素,然后在这元素中数个数
  3. 如果li之间还有别的元素,用of-type永远会找到li里面的第N项元素
  4. li里面有A的话,选择器后面加上li里面所需设置的样式才会生效
功能公式
偶数2n、even
奇数2n+1、2n-1、odd
找到前5个-n+5
找到从第5个往后n+5

标准流+浮动:

1、浮动的元素找相邻浮动的元素,顶部对齐,在同一行内显示 要浮动都浮动(加强版的行内块)

2、浮动的元素脱离标准流 在页面中不占有位置

3、浮动的元素只会影响到后面的元素

4、浮动元素不会超出父元素,在父元素内部进行浮动

5、浮动的元素只会压住下面的盒子,压不住盒子里的内容

6、浮动的元素可以直接加宽高,默认宽度是内容宽度

通栏:从左贯穿到右的一个盒子,这个盒子只给高度,不给宽度,让宽度默认给浏览器一样宽

版心:一个有宽度,且居中的盒子


BFC的介绍:
  1. 块格式化上下文(Block Formatting Context):BFC
  2. 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域
创建BFC方法:
  1. html标签是BFC盒子
  2. 浮动元素是BFC盒子
  3. 行内块元素是BFC盒子
  4. overflow属性取值不为visible。如:auto、hidden…
BFC盒子常见特点:
  1. BFC盒子会默认包裹住内部子元素(标准流、浮动)→ 应用:清除浮动
  2. BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用:解决margin的塌陷

本节单词:

  1. float
  2. clear
  3. both
  4. visibility
  5. before
  6. after
  7. fix
  8. first
  9. child
  10. nth
  11. last
  12. of