詳解CSS的overflow屬性防止float撐開div的使用方法-css教學-PHP中文網

詳解CSS的overflow屬性防止float撐開div的使用方法

高洛峰

發布： 2017-03-08 13:10:46

原創

1870 人瀏覽過

我們在使用float設定浮動元素的時候經常會遇到撐破p的情況,其中一種解決方法即是利用overflow: hidden,這裡我們就來看一下使用CSS的overflow屬性防止float撐開p的方法:

許多應徵前端工程師的人，在面試時都會被問到這類float的問題。
例如：p元素內的兩個子元素p都float:left，外面的p會變成沒有高度，此時該怎麼辦呢？
通常解法是在排版流裡面的元素加一個after的偽元素，將它設為display: block以及clear:both即可解決。

p:after {content: "";display: block;clear: both;}

登入後複製

不過我今天意外發現，原來overflow: hidden;也會撐開p呀！如下：
長知識了。

<body>
  <p>
    <p>I am floated</p>
    <p>So am I</p></p><style>p {   
    overflow: hidden;}p {   
    float: left;}</style>

登入後複製

#深入
讓我們繼續深入，來看下面的範例：
寫如下程式碼，查看效果
HTML程式碼:

<p class="content">
    <p class="p1">

    </p>
</p>

登入後複製

CSS程式碼:

.content {   
    border: 1px solid red;   
}   
.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
}

登入後複製

效果如下：
詳解CSS的overflow屬性防止float撐開div的使用方法

在content中加入一個p1，並設定了content標籤的邊框和p1標籤的大小和顏色，看到content標籤把p1標籤包起來了。並且還撐起了content標籤的大小

但，當我們設定了p1向右浮動的屬性之後

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
    float: rightright;   
}

登入後複製

就會變成這個樣子：
詳解CSS的overflow屬性防止float撐開div的使用方法

p1標籤確實是右對齊了，但並沒有撐起content標籤的高度。
莫急，我們需要設定一個屬性，就是給content標籤，加入overflow屬性

新增屬性(overflow: hidden;)

.content {   
    border: 1px solid red;   
    overflow: hidden;   
}

登入後複製

##加入完之後，效果就變成這樣

詳解CSS的overflow屬性防止float撐開div的使用方法

以上是詳解CSS的overflow屬性防止float撐開div的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也