六、CSS浮动

一、标准文档流

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

标准文档流组成块级元素（block）

<h1>…<h6>、<p>、<div>、

列表内联元素（inline）

<span>、<a>、<img/>、<strong>...

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

二、display属性

block ：块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符

inline：内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符

inline-block:行内块元素，元素既具有内联元素的特性，也具有块元素的特性

none:设置元素不会被显示

display:block;使行级元素变为块级，块级还是块级
display:inline;使块级元素变为行级，行级还是行级
display:inline-bloc使用时既有行级可以在同一行，又有块级可以调高宽  但有间隔消不掉
display:none;
​

可以使用什么属性使块元素排在一行？

inline-block

float

三、float浮动属性

float:left;元素向左浮动
float:right;元素向右浮动
float:none;默认值。元素不浮动，并会显示在其文本中出现的位置
​

四、clear属性 清除浮动

left：在左侧不允许浮动元素

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

both:在左、右两侧不允许浮动元素

none:默认值。允许浮动元素出现在两侧

五、overflow属性 溢出处理

visible：默认值。内容不会被修剪，会呈现在盒子之外

hidden：内容会被修剪，并且其余内容是不可见的 会强制如果有不影响但有超过的会直接修剪

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

六、清除浮动，防止父级边框塌陷的四种方法

1.浮动元素后面加空div，并设置clear：both;

简单，空div会造成HTML代码冗余（多余）

2.设置父元素的高度

简单，元素固定高会降低扩展性

3.父级添加overflow：hidden

简单，下拉列表框的场景不能用

4.父级添加伪类after

写法比上面稍微复杂一点，但是没有副作用，推荐使用

div:after{
    /*添加HTML元素*/
    content："";
    display:block;
    clear:both;
}