すぐ忘れてしまうので…
今日はwebページで要素の横並びについての備忘録。
まず今の所３パターン把握しています。
①overflow:hidden
・まず横並びにしたい要素に
float: left;
float: right; を指定しておく。
・その親要素に
overflow: hidden; をつける。
▷これはあまり現場では使われることが少なくなってきているらしい…
②display:flex
・横並びにしたい親要素に対して
display:flex をつけるだけ。
一緒に
flex-wrap: wrap もつけたようが良いと聞いたけど、つけなくてもいい、とも聞いた…
これについてはまた調べよう。
③.clearfix
.clearfix:after {
content: "";
clear: both;
display: block;
}
まずcssで上記の記述をしておく。
横並びにしたい要素の親に対して class="clearfix" をつけるだけ。
まず１行目の
contents: ""; で空のボックスを作っています。
２行目の
clear: both; で両方の回り込みを解除。
3行目の
display: block; で作った空要素をブロックレベルに変更しています。
以上。
実際どれがよく使われているのかは、まだわからないよ〜