浮动

块级元素与行内元素之间的互相转换

• display
  
  • inline 行内元素
    
    • 不可以设置宽高
    • 基线对其问题
    • 间隙问题
    • 从左到右排布
  • inline-block
    
    • 不可以设置宽高
    • 基线对其问题
    • 间隙问题
    • 从左到右排布
• float
  
  • left 左浮动
  • right 右浮动
  • none 去掉浮动

浮动的特点

• 脱离文档流（父元素找不到子元素了，相当于子元素来到了第二层级，平行于标准文档流）
• 在不设置宽高时，宽高时由内容决定的
• 所有的元素（无论块级元素还是行内元素）都可以设置float浮动这个属性
• 图文混编
• 不继承

float比display的权重大

清除浮动带来的影响（清除浮动）

• 给父元素设置高度
  
  • 子元素无论是否有内容，父元素的高度是一定的
• 给父元素设置一个overflow:hidden;
  
  • 子元素设置浮动后，脱离了文档流，给给父元素设置一个overflow:hidden; 后，会把子元素拉回文档流内
• 在所有设置浮动的元素后加clear:both;
  
  1. 这个元素必须是块级元素
  2. 用在所有设置浮动的元素之后
  3. 这个块级元素不能带有浮动的属性

<style>

ul li{

width: 100px;

height: 100px;

list-style: none;

float: left;

}

</style>

<ul>

<li>111 </li>

<li>222 </li>

<li>333 </li>

<div style="clear: both"> </div>

</ul>

• 用伪元素来清除浮动带来的影响——常用清除浮动的方法

<style>

<!--兼容高版本浏览器-->

.clear:after{

display: inline-block;

content: "";

clear: both;

}

<!--兼容低版本浏览器（即IE9以下版本）-->

.clear{

*zoom:1;

}

</style>

在项目中，给子元素设置浮动，必须给父元素（挨着子元素最近的父元素）设置清除浮动带来的影响