likes
comments
collection
share

[CSS篇]浅谈浮动工作原理以及如何清除浮动

作者站长头像
站长
· 阅读数 33

浮动！你是什么鬼！

咳咳，今天来写一下CSS里的浮动，就是float，顾名思义，给某个元素加上浮动属性，就是飘起来了。举个例子，文档流就是一个房子里，房子里有一些砖块，有的砖块加了浮动属性，它就飘起来了，飘起来后它原本的位置就会被没飘动的砖块代替，从屋顶往下看砖块，飘动的砖块可能会覆盖未飘动的砖块，就像把房子分割成两层，隔层是透明的，最底下一层是普通文档流，飘动后就脱离了文档流，说的还是有些抽象，（下图红色的砖块尺寸过大所以覆盖了基础文档流的元素） [灵魂画师哭了:( ] [CSS篇]浅谈浮动工作原理以及如何清除浮动

Talk is cheap. Show me the code.设置了三个盒子（div），div是块状元素，所以每个盒子独占一行，依次向下排列。

<html>
  <head>
    <style>
body {
        background-color: gray;
      }
      .red {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .blue {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
      .green{
        width: 50px;
        height: 50px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
  </body>
</html>

效果图： [CSS篇]浅谈浮动工作原理以及如何清除浮动扩展1：给红色盒子加上浮动，让它飘起来。（float：left） [CSS篇]浅谈浮动工作原理以及如何清除浮动诶！蓝色盒子呢！别着急，想想开头的例子，红色盒子尺寸比蓝色要大，而且红色盒子飘起来了！所以蓝色盒子和绿色盒子就往上移动，加上红色盒子太大把蓝色盒子覆盖了！细心地同学会发现绿色盒子也被覆盖了一部分。我们把红色盒子加上透明度看看蓝色盒子的真身吧！给红色盒子加了样式 opacity:0.2。举个例子：本来小红 ，小蓝和小绿排队买东西（div块状元素），突然小红说我不买了（float脱离文档流），然后小蓝和小绿就顺势补位了。这个例子只能说明蓝盒子和绿盒子补位。再举个例子：本来小红，小蓝和小绿是同事，上下级关系是小红>小蓝>小绿，突然有一天小红升职了（float），本来就只管理小蓝和小绿，现在要脱离原来的部门做更高的管理(脱离文档流)，然后小蓝和小绿就顺势补位。

效果图： [CSS篇]浅谈浮动工作原理以及如何清除浮动扩展2：给三个div都设置浮动（每个div的css样式里加float：left）效果图： [CSS篇]浅谈浮动工作原理以及如何清除浮动给大家都加上左浮动后，大家就依次浮起来靠左排列。

扩展3：给蓝色和绿色加上浮动，红色不动。 [CSS篇]浅谈浮动工作原理以及如何清除浮动诶不是说好了脱离文档流吗！蓝色和绿色为啥不上浮覆盖红色！因为有一个约束，红色在蓝色的前面，如果红色没有设置浮动，而下面的元素设置了浮动，蓝色就被红色顶着了，无法飘动。

扩展4：给红色和绿色加上浮动红色和绿色加了浮动后，蓝色就上移了，绿色仅挨着红色浮动，因为蓝色还是个div块状元素，所以绿色在下面。效果图： [CSS篇]浅谈浮动工作原理以及如何清除浮动

那么问题来了，怎么清除浮动呢？

等等作者，逻辑不对啊，为什么要清除浮动啊，浮动会有什么坏处吗？当然啦。浮动导致的后果：（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示

我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。方法一：在父元素的最后增加一个冗余的元素其样式并设置为clear:both三个元素都设置浮动的代码：原来的不浮动的时候，三个盒子垂直排列

<html>
  <head>
    <style>
      body {
        background-color: gray;
      }
      .red {
        width: 200px;
        height: 120px;
        background-color: red;
      }
      .father1 {
        width: 700px;
        margin: 0 auto;
        border: 10px solid blueviolet;
      }
      .blue {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
      .green {
        width: 50px;
        height: 50px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="father1">
      <div class="red"></div>
      <div class="blue"></div>
      <div class="green"></div>
    </div>
  </body>
</html>

效果图： [CSS篇]浅谈浮动工作原理以及如何清除浮动下面我们给三个盒子加上浮动（三个盒子的样式里加上：float：left）效果图： [CSS篇]浅谈浮动工作原理以及如何清除浮动瞧瞧父元素失去了价值！诶！父元素不是需要包含子元素的嘛！？因为三个盒子脱离了文档流，相当于父元素里的子元素跑了，边框就合并了。解决方案一：在父元素的最后增加一个冗余的元素其样式并设置为clear:both

<html>
  <head>
    <style>
      body {
        background-color: gray;
      }
      .red {
        width: 200px;
        height: 120px;
        background-color: red;
        float: left;
      }
      .father1 {
        width: 700px;
        margin: 0 auto;
        border: 10px solid blueviolet;
      }
      .blue {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .green {
        width: 50px;
        height: 50px;
        background-color: green;
        float: left;
      }
      .clear {
        height: 0px;
        clear: both;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="father1">
      <div class="red"></div>
      <div class="blue"></div>
      <div class="green"></div>
      <div class="clear"></div>
    </div>
  </body>
</html>

效果图： [CSS篇]浅谈浮动工作原理以及如何清除浮动父元素：拿来把你盒子们！哈哈哈！谢谢你啊clear：both兄弟！但是你太麻烦了噢clear:both说：“先别动让我走，让我说说我的原理！当我老父亲里的三个盒子都离家出走后，它的高度就变成0了，但是我还是一个孩子呀！我还没离家出走呀！我只能避开三个哥哥们的空间往下走，然后就被老父亲发现了，它还要来用边框包裹住我！哼！这样三个哥哥们也跑不了了！但是不推荐用我这个方法，因为要增加个冗余的标签，呜呜我就是个野孩子！拜”哦对了对了，clear其实只设置一个样式就行clear:both，上面写了三个hhh方法二：BFC思想，让父元素成立一个BFC区域很简单只要给父元素的样式加上overflow:auto或者overflow:hidden就好啦！效果图： [CSS篇]浅谈浮动工作原理以及如何清除浮动方法三：采用伪类:after，给父元素添加一个新的样式。

.clearbox:after {
        display: table; /*避免浏览器兼容问题 */
        content: '';
        clear: both;
      }

<div class="father1 clearbox">

总结

1、浮动是什么？为了让元素脱离文档流，给元素加上样式float：left或float：right。2、浮动可能会带来的问题是？（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素。（子元素设置为浮动的情况）（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示3、如何清除浮动？（1）添加一个冗余的标签<div class ="clear"></div> 其样式设置为

    height: 0px;
    clear: both;
    overflow: hidden;

（2）给父元素添加伪类样式

<div class="father clearbox"></div>
.clearbox:after {
        display: table; /*避免浏览器兼容问题 */
        content: '';
        clear: both;
      }

（3）给父元素设置样式overflow:auto或overflow:hidden将父元素划到一个BFC区域