はじめに
RUNTEQに入学して2ヶ月の学習者です。
バックではなく、フロント側ですがこちらもすごく興味があったのでまとめました。
1.なぜこの記事を作ったのか
以前floatプロパティを使用した時に挙動がよく分からなかった。間違い等があった際は指摘してもらえると助かります。
2.環境
- ブラウザはgoogle chromeを使用します。
3.floatプロパティとは
floatで囲った要素の周りに他の要素を回り込ませることが出来る。文字通り要素が浮いている(float)ような状態になる。
before
index.html
<div style="width: 200px; height: 200px; background-color: red"></div>
<script>document.write('テキスト'.repeat(500))</script>
divタグにfloat: left;を設定すると
after
divはブロック要素ですが、下にある"テキスト"が回り込んでくる。
4.理解を深める
以下のコードを書きました。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>floatについて</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="box bg-red"></div>
<div class="box bg-blue"></div>
<div class="box bg-brack"></div>
<div class="box bg-yellow"></div>
</main>
</body>
</html>
style.css
/* 見やすくする為に設定 */
* {
margin: 0;
padding: 0;
}
main {
max-width: 1000px;
margin: 0 auto;
}
.box {
width: 200px;
height: 200px;
}
.bg-red {
background-color: red;
}
.bg-blue {
background-color: blue;
}
.bg-black {
background-color: black;
}
.bg-yellow {
background-color: yellow;
}
ブラウザ
青が赤へ回り込む。四角の位置が同じなので見えなくなった。
黒が回り込み、浮いた赤と青が並んだ状態になった。
黒が浮いていないので黄は回り込むことが出来ない。
5.回り込みをさせたくない時
この状態の時に回り込む要素である青(.bg-blue)にclear: left;を指定すると
その2 floatさせた要素の親要素にcssの擬似要素を追加する
条件は上記と同じにして
index.html
<!-- .bg-redに親要素の追加 -->
<div class="clear-box"><div class="box bg-red"></div></div>
style.css
.clear-box::after {
content: "";
display: block;
clear: both;
}
これらを追記しても回り込まなくなる。
::afterは最後の行に擬似要素を追加しており、これがある為回り込むことが出来なくなった。