三种布局模型:
- 流动模型
- 浮动模型
- 层模型
流动模型:
流动模型就是正常的布局。
浮动模型:
特征:
- 浮动模型会找最近的元素进行贴浮。
- 当后面的浮动元素不能放下一个浮动元素,那么这个浮动元素会出现在下一行。
- 如果是右浮动顺序为从右向左,左浮动为从右向左。
- 行内元素设置了浮动之后可以设置宽高。
- 块元素在设置了浮动之后可以,宽高是由内容撑起的(但可以自行设置宽高)。
- 脱离文档流,如果说浮动的元素下面是一个块元素,那么浮动的元素会压住块元素但不会压住块元素的内容。
设置浮动的注意事项:
同级元素要么y全浮动,要么全部不浮动。
清除浮动:
为什么要清除浮动?
浮动会使一些元素脱离文档流。
清楚浮动的方法:
- 定高法:给浮动元素的父元素定一个高。
- 额外标签法:给浮动元素的父元素后面加一个div
- 超出隐藏法:给浮动元素的父元素一个超出隐藏。
- 利用伪元素:给浮动元素的父元素一个伪元素。
伪元素:
微元素是一个行内元素。
微元素可以这样写:
clear:after{
content:"0";
display:block;
clear:both
height:0;
vissbility:hidden;