浮動元素引起的問題和解決辦法

weixin_33727510發表於2018-03-23

一、問題

  1. 多個浮動的元素無法撐開父元素的寬度，父元素的高度可能會變成0。
  2. 若浮動元素後面跟非浮動元素，非浮動元素會緊隨其後浮動起來。
  3. 若浮動元素前面還有同級元素沒有浮動則會影響頁面結構。

二、解決辦法

1.clear:both

在最後一個浮動元素後面新增屬性為clear:both;的元素。

<style>
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
.clear{
    clear: both;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
    <div class="clear">5</div>
</div>

給父元素新增clear:both;屬性的:after偽元素。

<style>
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
.clear:after{
    content: '';
    display: block;
    clear: both;
}
</style>
<div class="parent clear">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>
注意：偽元素預設是內聯水平，所以藉助偽元素時要設定屬性display: block;。

2.overflow:auto / overflow: hidden

<style>
div.parent{
    overflow: auto;
    /*overflow: hidden;也可以*/
}
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>

3.浮動父級元素

<style>
div.parent{
    float: left;
}
div.parent>div.fl{
    float: left;
    width: 200px;
    height: 200px;
    margin-right: 20px;
    border: 1px solid red;
}
</style>
<div class="parent">
    <div class="fl">1</div>
    <div class="fl">2</div>
    <div class="fl">3</div>
    <div class="fl">4</div>
</div>
注意：一般不用這個方法，會引起父級元素排版問題。

相關文章