浮动

1、标准文档流

是指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列，这也是元素默认的排列方式。

内联元素：如 sapn、a、img等。

块元素：如 div、p、h标签等。

注意：内联元素可以嵌套内联元素，到不能嵌套块元素，块元素可以随便嵌套。

display属性：

• block : 块元素默认值，显示块元素特性前后换行。
• inline: 内联元素默认值，不换行。
• inline -  block :行内 块元素，既有内联元素的特性，也有块元素的特性。
• none: 设置元素不会被显示。

2、float属性

• left     元素向右浮动
• right   元素向左浮动
• none  默认值，不浮动

元素浮动：指让元素排列在一行，支持宽度和高度，脱离标准文档流，对周围产生影响。

浮动元素脱离标准文档流。

float : left；    元素向左浮动

float : right；   元素向右浮动

3、清除浮动

clear : left；     在左侧不允许浮动元素

clear : right;     在右侧不允许浮动元素

clear : both；     在左、右两侧不允许浮动元素（一般常用）

clear ： none；    默认值，允许浮动元素出现在左、右两侧

注意：清除浮动，不是不浮动，而是往下走，不在同一行。一般都是用both属性

4、父级边框塌陷

• 一、浮动元素后面加空div
• 二、设置父元素的高度
• 三、父级添加overflow属性
• 四、父级添加伪类after

一般常用三、四两种，具体也要看实际需求。

父级添加伪类：
div : after{
    content :'';             添加内容为空
    display:block;           把添加的内容设置为块元素
    clear:both;             清除两侧浮动
}