11 浮动

浮动 - 学习 Web 开发 | MDN (opens new window)

float - CSS（层叠样式表） | MDN (opens new window)

浮动基本概念

• 什么是浮动

  浮动就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

<!--HTML-->
<div class="left"></div>
<div class="right"></div>

/*css*/
div {
    width: 100px;
    height: 100px;
    background: red;
}
.left { float: left; }
.right { float: right; }

• 浮动的原理

  就是让元素脱离文档流，不占用标准流。

• float的属性值

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其在文本中出现的位置
inherit	规定应该从父元素继承 float 属性的值

左浮动(float:left;)，可以理解为漂浮起来后靠左排列，右浮动(float:right;)当然就是靠右排列。

取消浮动

浮动后，后面的元素（在文档流中）不管是块级还是行级元素，不会显示在下一行，因为前面的元素浮动了，不占用文档流，这时候要清除浮动。 清除浮动目的：让后面的元素自动掉到下一行。

方法：

1. 添加空标签，并设置样式：clear:both;

   clear:left; 清除左浮动
   clear:right; 清除右浮动
   clear:both; 清除左右浮动
   clear:none; 左右浮动都不清除
   clear:inherit ：继承父元素的clear属性值

<!-- box1 box2 浮动了 box3不浮动，期望在 box1 box2 下方显式 -->
<div class="wrapper">
        <div class="box1" style="float: left">box1</div>
        <div class="box2" style="float: right">box2</div>
        <div class="clear" style="clear: both"></div>
        <div class="box3">box3</div>
</div>

2. 在要清除浮动的父级添加样式：overflow:hidden; overflow:hidden; 超出部分隐藏，也可以用来实现清除浮动。

<div class="wrapper" style="overflow: hidden">
    <div class="box1" style="float: left">box1</div>
    <div class="box2" style="float: right">box2</div>
</div>
<div class="box3">box3</div>

属性值：
visible ：默认值。内容不会被修剪，会呈现在元素框之外，不剪切也不添加滚动条。
auto ：不显示超出内容，不剪切，会按照内容是否超出，自动添加，可用作清除浮动。
hidden ：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷 的功能。
scroll ：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

3. 在要清除浮动的父级添加伪元素，并设定样式：

父元素:after{
    content:"";
    display: block;
    clear:both;
}