5.浮动

5.1、标准文档流

块级元素：独占一行

h1-h6 p div list ...

行内元素

span a img strong ...

行内元素可以包含在块级元素中，反之不可以

5.2、display

5.3 float

display也是一种实现行内元素排列的方式，但是通常用float

因为display是在文档内的，而float是可以飘起来的

5.4、父级边框塌陷的问题

/*
clear:right 不允许有右侧的浮动元素 如果右侧有浮动元素 就排到下面去
clear:left 不允许有左侧的浮动元素 如果左侧有浮动元素 就排到下面去
clear:both 两侧都不允许有浮动元素 如果两侧有浮动元素 就排到下面去
clear:none 可以浮动
*/

解决方案：

1. 把父块设置的足够高，可以让子块就算独占行数也能放进父块里面

2. 在底端增加一个空的div标签

   <div class="clear"></div>
   
   .clear{
   		clear:both;
   
   }
   

3.  在父级元素中增加一个 overflow:hidden;
   

4. #father:after{
       content:'';
       display:block;
       clear:both;
   }
   

小结：

• 浮动元素后面增加空的div 优势：简单 劣势：但是代码中尽量避免空的div
• 设置父元素的高度 优势：简单 劣势：元素有了固定的高度就会被限制
• overflow 优势：简单 劣势：会出现下拉 和 被切除
• 在父类后加上伪类 写法稍微复杂 但是没有副作用 推荐使用

5.5、对比

• display 方向不可控制

• float 浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题