CSS基础<四>浮动流

1.标准流

概念
- 标准流即浏览器对网页中的元素进行排版的一种默认方式.
默认排版方式
- 块元素独占一行自上而下依次排布,行内元素/行内快元素自左而右在一行排布

2.浮动流

概念
- 使网页内的元素可以不按标准流的方式进行排布的一种方式
排版方式
- 块元素/行内元素/行内块元素均可进行水平布局,设置宽高
格式及注意点
- float:left|right 浮动流中没有居中对齐, 也就是没有center这个取值
- 在浮动流中是不可以使用margin: 0 auto;

浮动元素的脱标

元素浮动之后不占据原来的位置即脱标

  <style type="text/css">
      .box1{
          float:left;
          width: 100px;
          height: 100px;
          background: orange;
      }
      .box2{
          width: 150px;
          height: 150px;
          background: green;
      }
  </style>

浮动前.png

浮动后.png

元素排布规则

若浮动元素前没有同级未浮动元素

父级宽度可容纳所有所有浮动元素时,left属性时自左向右依次排布,right时自右向左排布

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
   .big{
       width: 600px;
       height: 300px;
       background: lightslategrey;
   }
   .box1{
       float:left;
       width: 100px;
       height: 200px;
       background: orange;
   }
   .box2{
       float:left;
       width: 100px;
       height: 100px;
       background: green;
   }
   .box3{
       float:left;
       width: 200px;
       height: 100px;
       background: blueviolet;
   }
   .box4{
       float:left;
       width: 100px;
       height: 100px;
       background: indianred;
   }
</style>
</head>
<body>
       <div class="big">
       <div class="box1"></div>
       <div class="box2"></div>
       <div class="box3"></div>
       <div class="box4"></div>
       </div>
</body>
</html>

1.png

父级宽度可不可容纳时自上而下拼贴(修改width=300px)

2.png

若浮动元素前有同级未浮动元素, 由浮动元素浮动之前在标准流中的位置来确定

浮动的文字缠绕效果

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
      .box{
          background: yellow;
          width: 200px;
          height: 150px;
      }
      .boxSmall{
          float:left;
          background:green;
          width: 50px;
          height: 60px;
      }
  </style>
 </head>
 <body>
  <div class="box">
      <div class="boxSmall"></div>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
  </div>
</body>

3.清除浮动

清除浮动
- 在标准流中父盒子未设置高度,子盒子的高度可以撑起父盒子的高度;但在浮动流中若未设置高度,父盒子的高度便为0,并且后面元素的排布位置将发生错误,所以有时必须清除浮动带来的影响.

清除浮动的方法

给父盒子添加高度清除浮动.(因为不能根据子盒子的内容变动而改变高度不建议使用)
clear:left|right|both 清除浮动

外墙法清除浮动

在最后一个浮动标签后添加一个额外标签
弊端:会添加大量无意义的标签

<div class="box">
     <div class="content"></div>
</div>
<div style="clear: both"></div>//浮动标签后添加这行
<div class="box2"></div>

添加伪元素清除浮动

<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
  .box{
      background-color: purple;
  }
  .content{
      float: left;
      background-color: green;
      width: 100px;
      height: 100px;
  }
  .box2 {

      /*clear: both;*/
      background-color: aquamarine;
      width: 200px;
      height: 200px;
  }
  .clearfix:after {
      /*生成内容作为最后一个元素*/
      content: "";
      /*使生成的元素以块级元素显示,占满剩余空间*/
      display: block;
      /*避免生成内容破坏原有布局的高度*/
      height: 0;
      /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
      visibility: hidden;
      /*重点是这一句*/
      clear: both;
  }
  .clearfix {
      /*用于兼容IE, 触发IE hasLayout*/
      *zoom:1;
  }
</style>
</head>
 <body>
   <div class="box clearfix">
       <div class="content"></div>
   </div>
    <!--<div style="clear: both"></div>-->
  <div class="box2"></div>
</body>
</html>

设置overflow清楚浮动
overflow:hidden的作用是清除溢出盒子边框外的内容
```
 .box{
      background-color: purple;
      overflow: hidden;
      *zoom:1
  }
```
- 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
- E8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个zoom:1;(实际上zoom:1能够触发IE8之前IE浏览器的hasLayout机制)
- zoom:1;和zoom:1的区别(这个是hack写法，用来识别不同版本的IE浏览器,后面的属性只有IE6能识别,后面的属性 IE6 IE7能识别)

属性	解释
overflow:visible	默认值,内容不会被修剪,会呈现在元素框之外
overflow:hidden	内容会被修剪,并且其余的内容是不可见的
overflow:scroll	内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
overflow:auto	如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

参考:http://www.jianshu.com/p/3c3bfcc37de6

CSS基础<四>浮动流

1.标准流

2.浮动流

3.清除浮动

推荐阅读更多精彩内容