CSSクリアフローティング

5651 ワード

フローティングをクリアする方法:

フローティング要素の親要素に高さを設定:

<div class="container">
	<div class="float">div>
div>

.container {
       
  height: 200px; /*        */
}
.float {
       
  float: left;
}

最後のフローティング要素に追加ラベルを追加してフローティングをクリーンアップします.(フローティング固有の追加要素をクリアするために冗長要素を生成しないことを推奨)

<div class="container">
  <div class="float">div>
  <div class="clear">div>
div>

.float {
       
  float: left;
}
.clear {
       
  clear: both;
}

後、擬似要素はフローティングをクリアします(推奨).

<div class="container">
  <div class="float">div>
div>

.container::after {
       
  content: '';
  display: block;
  clear: both;
}

ポストダミー要素によってフローティングがクリアされ、冗長DOMは生成されません.