float 浮动

浮动：

　　1.可以改变标签的默认排列方式；

　　2.可以让多个块级标签在同一行内显示；

　　3.设置浮动的元素脱离标准流，移动到指定的位置（比如：float：left），浮动的标签不再保留原来的位置；

　　4.具有行内块的特性；

 

 

一、当标签（块级标签、行内标签）添加了 浮动属性，则不需要转行display就可以设置宽、高;

.line {
  float: left;
  background: skyblue;
  height: 40px;
}

<span class="line">行内标签添加浮动属性，可以直接设置宽、高</span>

 

二、让块级标签无缝排列在同一行

    .bg {
      height: 150px;
      background: olivedrab;
    }

    .c {
      margin:0 10px;
      width: 300px;
      height: 120px;
      background: red;
      float: left;
    }

  <div class="bg">
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
  </div>

 

三、清除浮动

 

当父级标签的高度是由内部子元素撑起且子标签设置浮动属性，则会导致父元素没有高度，出现异常

 

 

 

 

清除浮动的方式	缺点
额外标签法	增加多余的无意义标签
父级标签overfloat：hidden	溢出隐藏
父级标签after伪元素	IE6、7兼容性问题
父级标签双伪元素	IE6、7兼容性问题

 

1.标签法 清除浮动: 找到最后一个浮动的标签，在其后面添加一个空的 块级标签

    /* 额外标签法 */
    .father1 {
      width: 300px;
      background: pink;
      border: 1px solid red;
    }
    .father1 .children {
      float: left;
      width: 100px;
      height: 100px;
      margin-left: 10px;
      background: blue;
    }
    .father1 .clear {
      clear: both;
    }


<div class="father1">
  <div class="children">1</div>
  <div class="children">2</div>

  <div class="clear"></div>
</div>

 

2.父标签使用 after伪元素 清除浮动

    /* after伪元素 清除浮动 */
    .father3 {
      width: 300px;
      background: pink;
      border: 1px solid red;
    }
    .father3 .children {
      float: left;
      width: 100px;
      height: 100px;
      margin-left: 10px;
      background: blue;
    }

    .clearfix::after {
      content: '';
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
    }
    .clearfix {
      *zoom: 1; /* IE: 6、7清除浮动 */
    }


<span>父标签使用 after伪元素 清除浮动</span>
<div class="father3 clearfix">
  <div class="children">1</div>
  <div class="children">2</div>
</div>

 

3.父标签使用 双伪元素 清除浮动

     /* 双伪元素 清除浮动 */
     .father4 {
      width: 300px;
      background: pink;
      border: 1px solid red;
    }
    .father4 .children {
      float: left;
      width: 100px;
      height: 100px;
      margin-left: 10px;
      background: blue;
    }

    .father4 .clearfix::before,
    .father4 .clearfix::after {
      content: '';
      display: table;
    }
    .father4 .clearfix::after {
      clear: both;
    }
    .father4 .clearfix {
      *zoom: 1;
    }


<span>父标签使用 双伪元素 清除浮动</span>
<div class="father4 clearfix">
  <div class="children">1</div>
  <div class="children">2</div>
</div>

 

4.父标签添加  overflow: hidden 清除浮动

    /* 父标签 overflow: hidden清除浮动 */
    .father2 {
      width: 300px;
      background: pink;
      border: 1px solid red;

      overflow: hidden;
    }
    .father2 .children {
      float: left;
      width: 100px;
      height: 100px;
      margin-left: 10px;
      background: blue;
    }


<div class="father2">
  <div class="children">1</div>
  <div class="children">2</div>
</div>