clearfix::afterを使ってfloatの解除をしようとしておりますが、
何回書き直しても上手く行きません。
どこが、どう間違っているのかご教授いただければと思います。
html
1<body> 2 <header> 3 <div class="container clearfix"> 4 ヘッダー 5 </div> 6 </header> 7 8 <main> 9 <div class="container"> 10 <div id="left">left</div> 11 <div id="right">right</div> 12 </div> 13 </main> 14 15 <footer> 16 <div class="container"> 17 フッター 18 </div> 19 </footer>
css
1.container{ 2 margin: 0 auto; 3 width: 500px; 4} 5 6header{ 7 background: tomato; 8} 9 10main{ 11 background: blue; 12} 13 14#left{ 15 background: limegreen; 16 float: left; 17 width: 200px; 18} 19 20#right{ 21 background: limegreen; 22 float: right; 23 width: 300px; 24} 25 26.clearfix::after{ 27 content: ''; 28 display: block; 29 clear: both; 30} 31 32footer{ 33 clear: both; 34 background: gray; 35} 36
ちなみに、stylesheetにではなく、HTMLに直接
<div style="clear:both;"></div>を記載すればうまくいきました。 ```html <main> <div class="container"> <div id="left">left</div> <div id="right">right</div> </div> <div style="clear:both;"></div> </main> ```回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。