CSS的float屬性，即浮動屬性，也是常用的用來定位的屬性，可以使一個元素脫離正常的文檔流，然后被安放到它所在容器的的左端或者右端，并且可以使其他的文本和行內(nèi)元素圍繞它安放。

在CSS中，任何元素都可以浮動，并且不論他本身是什么元素，都會變成一個塊級框。即使設(shè)置了其他的display屬性值，大部分也會被計算為block，這里具體可以查看MDN

語法

float: none|right|left|inherit;

屬性值

正常情況

<div class="container">
  <div class="box">box1</div>
  <div class="box" id="two">box2</div>
  <div class="box">box3</div>
</div>

.container {
  width: 200px;
  height: 200px;
  background-color: #e8eae9;
}
.box {
    float: none;
    width: 50px;
    height: 50px;
    border: 2px solid #0dd;
    margin: 2px;
    background-color: #0ff;
}

此時示意圖如下:

float_none

左浮動或右浮動

當(dāng)一個元素浮動之后，它會被移出正常的文檔流，向左或者向右浮動，直到所在容器的邊緣，或者碰到了其他的浮動元素。

#two {
  float: left;
}

此時，id為two的div,就會脫離文檔流，浮動到父元素的最左邊，然后后面的div就會上來填充他本來的位置。

float_left

#two {
  float:right;
}

與float為left時的表現(xiàn)相似，只不過是向右浮動

float_right

常見應(yīng)用

.box {
    float: left
}

此時的效果:

float_all

可是使用這種方式來制作導(dǎo)航欄

float元素與行內(nèi)元素

上面主要是展示了　float之后的元素在多個塊元素中的位置變化，下面說一說在文本元素中或者行內(nèi)元素中的表現(xiàn)

float之后的元素，可以使其他的文本和行內(nèi)元素圍繞它安放。

<div class="container">
  <div class="box" id="one">box1</div>
  <div class="box inline">inline</div>
</div>

.container {
  width: 200px;
  height: 200px;
  background-color: #e8eae9;
}
.box {
    width: 50px;
    height: 50px;
    border: 2px solid #0dd;
    margin: 2px;
    background-color: #0ff;
}
.inline {
  display: inline-block;
}
#one {
  float: left;
}

可以看到此時行內(nèi)元素并不會填充到float元素之前的位置，而是圍繞著它。

inline

float元素與文本元素

float之后的元素與文本元素直接的表現(xiàn)，和行內(nèi)元素直接的表現(xiàn)一樣，也是圍繞這它;

<div class="container">
  <div class="box" id="one">box1</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

.container {
  width: 200px;
  height: 200px;
  background-color: #e8eae9;
}
.box {
    width: 50px;
    height: 50px;
    border: 2px solid #0dd;
    margin: 2px;
    background-color: #0ff;
}
#one {
  float: left;
}

float_text