【疑點】當子元素所有浮動時，怎麼解決父元素塌陷的問題？

時間 2019-12-11

標籤疑點當子元素所有浮動怎麼解決問題简体版

原文原文鏈接

問題描述：spa

在咱們讓元素浮動的時候，它就會離開原來的文檔流，將它原先佔有的空間釋放。code

打個比方，父元素就如一個有伸縮性的容器，而子元素就如一個氣球。當沒有設置容器的高寬時，他的高寬徹底是被裝在裏面的氣球撐開的，當子元素浮動時候，就像氣球從容器裏飄了出來，飄在了他的上方。而此時容器也就空了，因爲伸縮性，高度就變爲了o，看不見了。blog

而咱們想要父元素顯示出來，正常得被子元素撐開，怎麼作呢？文檔

代碼描述：class

<style>
        #div1{
            background-color: blank;
        }
        #div2{
            width: 20%;
            height: 200px;
            background-color:red ;
            float: left;
        }
        #div3{
            width: 20%;
            height: 200px;
            background-color: blue;
            float: left;
        }
        #div4{
            width: 20%;
            height: 200px;
            background-color: yellow;
            float: left;
        }
    </style>
    <body>
        <div id="div1">
            <div id="div2"></div>
            <div id="div3"></div>
            <div id="div4"></div>
        </div>
    </body>

此時效果爲：容器

此時父元素的黑色就沒有顯示出來，由於他的高度變爲了0。float

解決方案：方法

一、父元素添加高度。im

 #div1{
            background-color: blank;
            height：200px；
        }

此方法能夠將父元素顯示出來。img

缺點：但當你調整子元素高度的時候，若你要實現父元素包含子元素的效果，你就也要調整父元素高度。

實在很麻煩！因此此方法不要用！很low！

二、父元素也添加浮動。

#div1{
            background-color: black;
            width: 100%;
            float: left;
        }

以暴制暴的方法！別人浮起來你也要跟着一塊兒浮。

缺點：雖然能夠解決問題，可是後面要添加有不須要浮動的子元素，則影響其顯示。

三、給父元素添加overflow：hidden；

#div1{
            background-color: black;
            overflow: hidden;
        }

缺點：一旦包含非浮動的子元素，則會影響其顯示。

四、給父元素添加一個無關的元素，讓添加的無關元素去清除浮動 clean：both;

        #div5{
            clear:both;
        }
    </style>
    <body>
        <div id="div1">
            <div id="div2"></div>
            <div id="div3"></div>
            <div id="div4"></div>
            <div id="div5"></div>
        </div>
    </body>

缺點：添加了一個無關元素，代碼閱讀受影響。

五、經過僞類來實現，在須要清除浮動的父元素裏，添加一個清除浮動的僞類。

#div1:after{
            content: "";
            display: block;
            clear: both;
          }

推薦此方法！！！比較高級！！並且沒有以上缺點！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。