float属性

float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

（1）float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果;

（2）但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具;

绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果

float:none; 默认值

float:left; 向左浮动

float:right; 向右浮动

浮动规则

  1. 元素一旦浮动后, 脱离文档流，如果元素是向左浮动，浮动元素的左边界不能超出包含块(父级)的左边界，向右浮动也一样。
  2. 浮动元素之间不能层叠，如果一个元素浮动，后浮动的元素将紧贴着前一个浮动元素。
  3. 包含块的宽度不够，水平方向剩余的空间不够显示浮动元素，浮动元素将移到下一 行。
  4. 不再向父级元素汇报高度
  5. 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
  6. inline元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐。

规则一

18.浮动属性 - 图1

浮动水平排列

width宽度 设置为1190px

水平排列的div间隙设置margin-right:10px

给浮动元素包裹一个div 设margin-right:-10px

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <style>
  7.     * {
  8.       margin: 0;
  9.       padding: 0;
  10.     }
  11.     .content{
  12.       width: 1190px;
  13.       margin: 0 auto;
  14.       background-color: #f4f4f4;
  15.     }
  16.     .wrapper{
  17.       overflow: hidden;
  18.       margin-right: -10px;
  19.     }
  20.     .item{
  21.       float: left;
  22.       margin-right:10px ;
  23.     }
  24.     .item-left{
  25.       /* 290*4=1160 margin-right*4=40 */
  26.       width: 290px;
  27.       height: 370px;
  28.       background-color: #f90;
  29.     }
  30.     .item-right{
  31.       width: 290px;
  32.       height: 180px;
  33.       background-color: #f90;
  34.       margin-bottom:10px ;
  35.     }
  36.   </style>
  37. </head>
  38. <body>
  39.   <div class="content">
  40.     <div class="wrapper">
  41.       <div class="item item-left"></div>
  42.       <div class="item item-left"></div>
  43.       <div class="item item-right"></div>
  44.       <div class="item item-right"></div>
  45.       <div class="item item-right"></div>
  46.       <div class="item item-right"></div>
  47.       <div class="item item-right"></div>
  48.       <div class="item item-right"></div>
  49.       <div class="item item-right"></div>
  50.       <div class="item item-right"></div>
  51.       <div class="item item-right"></div>
  52.       <div class="item item-right"></div>
  53.       <div class="item item-right"></div>
  54.       <div class="item item-right"></div>
  55.     </div>
  56.   </div>
  57. </body>
  58. </html>

18.浮动属性 - 图2

浮动高度塌陷

因为元素浮动，脱离文档流，不再向父级汇报高度，父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题。

清除浮动

清浮动的目的是：让父元素计算总高度的时候，把浮动子元素的高度算进去。

clear属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;

none：默认值

clear:left; 要求元素的顶部低于之前生成的所有左浮动元素的底部

clear:right; 要求元素的顶部低于之前生成的所有右浮动元素的底部

clear:both; 要求元素的顶部低于之前生成的所有浮动元素的底部

解决方法：给父元素增加::after伪元素

    .clear_fix::after{
      content: "";
      display: block;
      clear: both;
      visibility: hidden;/* 浏览器兼容性 */
      height: 0;/* 浏览器兼容性 */
    }
    .clear_fix{
      *zoom: 1;/* 兼容IE6/7浏览器 */
    }

元素层级排名

普通元素 < 浮动元素 < 定位元素

定位元素会把浮动元素和普通元素盖住

布局方案总结

布局方案 应用场景
文档流 垂直布局
定布 层叠布局
浮动 水平布局