乐趣区

关于css:CSS篇浅谈浮动工作原理以及如何清除浮动

浮动!你是什么鬼!

咳咳,明天来写一下 CSS 里的浮动,就是 float,顾名思义,给某个元素加上浮动属性,就是飘起来了。
举个例子,文档流就是一个房子里,房子里有一些砖块,有的砖块加了浮动属性,它就飘起来了,飘起来后它本来的地位就会被没飘动的砖块代替,从屋顶往下看砖块,飘动的砖块可能会笼罩未飘动的砖块,就像把房子宰割成两层,隔层是通明的,最底下一层是一般文档流,飘动后就脱离了文档流,说的还是有些形象,(下图红色的砖块尺寸过大所以笼罩了根底文档流的元素)[灵魂画师哭了:(]

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>

效果图:

扩大 1:给红色盒子加上浮动,让它飘起来。(float:left)

诶!蓝色盒子呢!别着急,想想结尾的例子,红色盒子尺寸比蓝色要大,而且红色盒子飘起来了!所以蓝色盒子和绿色盒子就往上挪动,加上红色盒子太大把蓝色盒子笼罩了!细心地同学会发现绿色盒子也被笼罩了一部分。咱们把红色盒子加上透明度看看蓝色盒子的真身吧!给红色盒子加了款式 opacity:0.2。
举个例子:原本小红,小蓝和小绿排队买货色(div 块状元素),忽然小红说我不买了(float 脱离文档流),而后小蓝和小绿就趁势补位了。
这个例子只能阐明蓝盒子和绿盒子补位。
再举个例子:原本小红,小蓝和小绿是共事,上下级关系是小红 > 小蓝 > 小绿,忽然有一天小红升职了(float),原本就只治理小蓝和小绿,当初要脱离原来的部门做更高的治理(脱离文档流),而后小蓝和小绿就趁势补位。

效果图:

扩大 2:给三个 div 都设置浮动(每个 div 的 css 款式里加 float:left)
效果图:

给大家都加上左浮动后,大家就顺次浮起来靠左排列。

扩大 3:给蓝色和绿色加上浮动,红色不动。

诶不是说好了脱离文档流吗!蓝色和绿色为啥不上浮笼罩红色!因为有一个束缚,红色在蓝色的后面,如果红色没有设置浮动,而上面的元素设置了浮动,蓝色就被红色顶着了,无奈飘动。

扩大 4:给红色和绿色加上浮动
红色和绿色加了浮动后,蓝色就上移了,绿色仅挨着红色浮动,因为蓝色还是个 div 块状元素,所以绿色在上面。
效果图:

那么问题来了,怎么革除浮动呢?

等等作者,逻辑不对啊,为什么要革除浮动啊,浮动会有什么害处吗?
当然啦。
浮动导致的结果:
(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>

效果图:

上面咱们给三个盒子加上浮动(三个盒子的款式里加上 :float:left
效果图:

瞧瞧父元素失去了价值!诶!父元素不是须要蕴含子元素的嘛!?因为三个盒子脱离了文档流,相当于父元素里的子元素跑了,边框就合并了。
解决方案一:在父元素的最初减少一个冗余的元素其款式并设置为 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>

效果图:

父元素:拿来把你盒子们!哈哈哈!谢谢你啊 clear:both 兄弟!然而你太麻烦了噢
clear:both 说:“先别动让我走,让我说说我的原理!当我老父亲里的三个盒子都离家出走后,它的高度就变成 0 了,然而我还是一个孩子呀!我还没离家出走呀!我只能避开三个哥哥们的空间往下走,而后就被老父亲发现了,它还要来用边框包裹住我!哼!这样三个哥哥们也跑不了了!然而不举荐用我这个办法,因为要减少个冗余的标签,呜呜我就是个野孩子!拜”
哦对了对了,clear 其实只设置一个款式就行 clear:both,下面写了三个 hhh
办法二:BFC 思维,让父元素成立一个 BFC 区域
很简略只有给父元素的款式加上 overflow:auto 或者 overflow:hidden 就好啦!
效果图:

办法三:采纳伪类: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 区域

退出移动版