CSS浮动

一.结构伪类选择器

 n的注意点：可以填公式

偶数和奇数更常用，4n表示第4、8...个

二.伪元素

 

三.标准流

 四.浮动

1.1.浮动的作用

 1.2.浮动的代码

浏览器解析行内块或者行内标签的时候，如果标签换行书写会产生一个空格的距离因此为了让两个行内块之间没有空格，就使用浮动。

1.3.浮动的特点

 

浮动的标签是顶对齐的，若不想顶对齐可以用margin。

 

 浮动的权利比较大，因为有浮动，不能生效 -- 盒子无法水平居中。

 

（案例）网页布局案例

（案例）小米模块案例

（案例）网页导航案例

注意：在主导航中必须li里面套a

在开发中，为了考虑用户体验，触发范围更大，所以图中80*50加给a

 五.清除浮动
1.1.清除浮动的介绍

 

 2.1.清除浮动的方法 - ①直接设置父元素高度

 2.2.清除浮动的方法 - ②额外标签法

 

 

2.3.清除浮动的方法 - ③单伪元素清除法

 

 2.4.清除浮动的方法 - ④双伪元素清除法

这样可以避免外边距塌陷的问题

 2.5.清除浮动的方法 - ⑤给父类设置overflow:hidden