css浮动

基本概念

浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的
外边缘碰到包含框或者另一个浮动元素的框的边缘。
浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.

正常情况

  <div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green; ">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;">
      </div>
  </div>

Paste_Image.png

红向右浮动

  <div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red; float:right;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green; ">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;">
      </div>
  </div>

Paste_Image.png

红框左移,覆盖绿框

  <div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;">
      </div>
  </div>

Paste_Image.png

都向左浮动,父元素高度为0

  <div style="border: solid 5px #0e0; width:300px;">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
  </div>

Paste_Image.png

如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的空间,如果浮动元素的高度不同,那么向下移动的时候可能被卡住

  <div style="border: solid 5px #0e0; width:250px;">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
  </div>

Paste_Image.png

卡住了

 <div style="border: solid 5px #0e0; width:250px;">
      <div style="height: 120px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
  </div>

Paste_Image.png

行框

浮动会让元素脱离普通流, 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框

不浮动

<div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red;"></div>
      <div style="height: 100px; width: 100px; background-color: Green;">
         11111111111
         11111111111
      </div>
  </div>

Paste_Image.png

浮动

  <div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
      <div style="height: 100px; width: 100px; background-color: Green;">
         abc def ghi
         abc def ghi
         abc def ghi
      </div>
  </div>

Paste_Image.png

上面放不下，放到下面去

Paste_Image.png

可以看出浮动后虽然绿色div布局不受浮动影响，正常布局，但是文字部分却被挤到了红色浮动div外边。要想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left，right，both，none表示框的哪些边不挨着浮动框

  <div style="border: solid 5px #0e0; width: 250px;">
      <div style="height: 50px; width: 50px; background-color: Red; float:left;"></div>
      <div style="height: 100px; width: 100px; background-color: Green; clear:both;">
         11111111111
         11111111111
      </div>
  </div>

Paste_Image.png Paste_Image.png

作者：王翔 QQ：592767079 Email：wangxianglengye.com 期待共同进步！