3.2 CSS浮动属性float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

float属性值：

• left：元素向左浮动
• right：元素向右浮动
• none：元素不浮动
• inherit：从父级继承的浮动属性

clear属性可去掉浮动属性，clear属性值：

• left：去掉元素向左浮动
• right：去掉元素向右浮动
• both：左右两侧均去掉浮动
• inherit：从父级继承来的clear值

1. 示例

(1) 普通流(默认静态布局)

• float.html

• style_float.css

#div1{
    width: 100px;
    height: 100px;
    background-color: red;
}
#div2{
    width: 100px;
    height: 100px;
    background-color: blue;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
}

普通流.png

(2) 元素向左浮动

#div1{
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#div2{
    width: 150px;
    height: 100px;
    background-color: blue;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: green;
}

备注：红色元素向左浮动。红色遮挡了蓝色，相当于绝对布局，红色脱离了页面，不占有页面位置。

元素向左浮动.png

(2) 元素向右浮动

元素向右浮动.png

(3) 所有元素向左浮动

所有元素向左浮动.png

(4) 浮动—主容器宽度可承载所有内容的情况

浮动—主容器宽度可承载所有内容的情况.png

(5) 浮动—主容器宽度未能承载所有内容的情况

浮动—主容器宽度未能承载所有内容的情况-eg1.png

浮动—主容器宽度未能承载所有内容的情况-eg2.png

(6) 继承父级浮动属性

  

      

      

      

      Hello
  

继承父级浮动属性-eg1.png

  

      

      

      

      Hello World
  

继承父级浮动属性-eg2.png

  

      

      

      

      HelloWorld!
  

继承父级浮动属性-eg3.png

(5) 去掉继承于父级的浮动属性

  

      

      

      

      
HelloWorld!
  

去掉继承于父级的浮动属性.png

2. float应用

(1) 实现瀑布流布局效果

• float_practice.html

• style_float.css

/*通配符选择器*：所有的标签或元素*/
*{
    margin: 0px;
    padding: 0px;
}
#mydiv{
    width: 950px;
    height: auto;
    margin: 20px auto;
}
ul{
    width: 250px;
    float: left;
}
li{
    list-style: none;
}
img{
    width: 200px;
    height: 200px;
}

通配符选择器*： 所有的标签或元素
auto ： 自适应

瀑布流效果布局.png

(2) 使文字环绕在图像周围(float浮动的最初目的)

在下面的段落中，我们添加了一个样式为 float:right 的图像。结果是这个图像会浮动到段落的右侧。


This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.

图片浮动.png

问题：既然浮动元素脱离了文档流，为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢？为了明白这个问题，必须先弄明白几个问题：
① 浮动的目的：最初浮动只能用于图像，目的就是为了允许其他内容（如文本）“围绕”该图像。而后来的CSS允许浮动任何元素。
② 绝对定位与浮动的区别：绝对定位是将元素彻底从文档流删除，该元素不会影响其他元素的布局；而浮动虽然也会将元素从文档的正常流中删除，并把元素向左或右边浮动，但是该浮动元素还是会影响布局，即：一个元素浮动时，其他内容会“环绕”该元素，避免其他内容被浮动的元素覆盖掉。

(3) 实现块级元素同行排列(现在float用得最多的使用场景)

    
div1
    
div2
    
div3
    



    内容

块级元素同行排列.png

拓展：元素浮动虽然使元素显示更为灵活，但同时也会带来一些问题，参考解决子元素浮动导致父元素高度塌陷的问题(清除浮动的方法)。