【CSS】深入理解CSS浮动布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/AC_greener/article/details/83865146

很多人对float属性理解的并不好，所以对float布局就有一点恐惧（比如我~），因为用float布局时会出现很多莫名其妙得问题，比如：
1，父元素的高度怎么没啦？
2， float元素怎么和其他元素重叠在一块了？

说到float，就必须先说另外一个概念： 文档流

文档流有两种：

一，内联元素的文档流从左往右流动，比如：

 <style>
    div {
      border: 1px solid red;
      width: 600px;
    }
  </style>
  <div>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
  </div>

可以看到hello水平排列的， 在到达箭头所指的位置时，换行了。为什么呢？ 因为剩下的位置不够一个hello的排列，根据内联元素从左往右流动的规则，hello文本会另起一行

二， 块级元素的文档流从上往下流动，比如：

<style>
    div {
      border: 1px solid red;
      width: 600px;
    }
  </style>
  <div>
   <h1>hello</h1>
   <h1>hello</h1>
   <h1>hello</h1>
   <h1>hello</h1>
   <h1>hello</h1>
   <h1>hello</h1>
  </div>

效果如图所示：

重点来了！！！

块级元素的高度由其文档流的高度决定

再来看float布局，使用float的元素会脱离文档流，看一个例子：

  <style>
    .container {
      border: 3px solid red;
    }
    .container div {
      float: left;
      width: 100px;
      height: 100px;
    }
    .content1 {
      background: black;
    }
    .content2 {
      background: blue;
    }
    .content3 {
      background: gray;
    }
    .content4 {
      background: yellow;
    }
    .content5 {
      background: green;
    }
    .content6 {
      background: tomato;
    }
  </style>
  <div class="container">
    <div class="content1"></div>
    <div class="content2"></div>
    <div class="content3"></div>
    <div class="content4"></div>
    <div class="content5"></div>  
    <div class="content6"></div>  
  </div>

可以看到父元素没有被里面的元素撑起来，只有border
根据：

块级元素的高度由其文档流的高度决定

父元素高度塌陷不是很正常嘛？

如何解决父元素高度塌陷问题呢？

只要给浮动元素的爸爸加上一个clearfix：

 .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }

这样，就解决了浮动元素的爸爸高度塌陷问题。

那么如何用float实现两栏布局呢？

 <style>
  
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }
    .container {
      border: 3px solid red;
    }
    .container div {
      width: 100px;
      height: 100px;
    }
    .content1 {
      float: left;
      background: black;
    }
    .content2 {
      float: left;
      background: blue;
    }
    .content3 {
      float: right;
      background: gray;
    }
    .content4 {
      background: yellow;
      float: right;
    }
  </style>
  <div class="container clearfix">
    <div class="content1"></div>
    <div class="content2"></div>
    <div class="content3"></div>
    <div class="content4"></div>
  </div>

只需要让左边的元素左浮动，右边元素右浮动就ok啦