フローティング CSS_html/css_WEB-ITnose をクリアする 6 つの方法に関する簡単な説明-htmlチュートリアル-php.cn

フローティング CSS_html/css_WEB-ITnose をクリアする 6 つの方法に関する簡単な説明

WBOY

リリース： 2016-06-21 09:04:29

オリジナル

1145 人が閲覧しました

追加タグメソッド

Use:after疑似要素

親要素の高さを設定

overflow:hidden属性を使用

親要素は浮動します

親要素は絶対に配置されます

Web ページを開発するときは、さまざまなフロートを使用する必要があることがよくありますが、このとき、フロートを時間内にクリアする必要があります。そうしないと、レイアウトの問題が発生します

質問の先頭:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width:300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

ログイン後にコピー

3 をラップする必要があることがわかります。この時点では、内側の DIV の外側の DIV はラップされていません。同時に、フッターの DIV 要素もその下に配置されています。 3 つの浮動要素

解決策:

1. 追加のラベルヘアを使用する

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix{            clear: both;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>        <div class="clearfix"></div>    </div>    <div class="footer"></div></body></html>

ログイン後にコピー

これは初期の頃によく使用される方法ですが、コードにこだわる人にとっては、この解決策は完璧ではありません

2.要素の後に

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix:after{  /*最简方式*/            content: '';            display: block;            clear: both;        }        /* 新浪使用方式        .clearfix:after{             content: '';            display: block;            clear: both;            height: 0;            visibility: hidden;        }        */        .clearfix{ /*兼容 IE*/            zoom: 1;        }    </style></head><body>    <div class="outer clearfix">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

ログイン後にコピー

3. 親要素の高さを設定します

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            height: 50px;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

ログイン後にコピー

4. overflow:hidden 属性を使用します

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            overflow: hidden;            zoom: 1;/*兼容 IE*/        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

ログイン後にコピー

5. 親要素が浮動すると、そこに子要素のフローティングのためにフロートをクリアする必要はありません

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            float: left;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="footer"></div></body></html>

ログイン後にコピー

外側のDIVは崩壊現象を解消しますが、フローティングでもあるため、後続の要素が落ちてしまうことがわかります。通常の文書フローに含まれていない場合は、一番下に表示されます。

それを解決したい場合は、前の方法を参照してください。

例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            float: left;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }        .clearfix:after{            content: "";            display: block;            clear: both;        }        .clearfix{            zoom: 1;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="clearfix"></div>    <div class="footer"></div></body></html>

ログイン後にコピー

6. 親要素は絶対配置です

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .outer{            border: 1px solid black;            width: 300px;            position: absolute;        }        .inner{            width: 50px;            height: 50px;            background-color: #ff4400;            margin-right: 20px;            float: left;        }        .footer{            background-color: #005FC3;            width: 200px;            height: 100px;        }    </style></head><body>    <div class="outer">        <div class="inner"></div>        <div class="inner"></div>        <div class="inner"></div>    </div>    <div class="clearfix"></div>    <div class="footer"></div></body></html>

ログイン後にコピー

絶対配置が通常のドキュメントフローから分離されているため、同じ状況が発生します。上記の方法と柔軟に組み合わせることができます。