Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

float の解除 clearfix

$
0
0

子要素が全てfloatの時の、親要素の高さ

通常、親要素の高さは子要素を包む高さとなるが、子要素が全てfloatの時、親要素の高さは0となってしまうという性質がある。

float は浮いているという意味で、親要素からみると float の子要素は存在しないように見えるからである。

<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title></title><linkrel="stylesheet"href="css/reset.css"><linkrel="stylesheet"href="css/style.css"></head><body><headerclass="header"></header><divclass="wrapper"><mainclass="main"></main><divclass="sidemenu"></div></div><footerclass="footer"></footer></body></html>
.header{width:100%;/* border: 1px solid red; */}.wrapper{width:970px;/* border: 1px solid red; */margin:30pxauto40px;}.main{display:block;float:left;width:660px;}.sidemenu{float:right;width:275px;}.footer{width:100%;}.header,.main,.sidemenu,.footer{border:1pxsolid#aaa;background-color:#ccc;}.header,.footer{height:100px;}.main,.sidemenu{height:500px;}

mainクラスとsidemenuクラスにはそれぞれfloatが指定されているため高さを認識できなくなり、footerが上がってしまう。

スクリーンショット 2019-11-05 12.19.32.png

改善策

親要素にclearfixクラスみたいにクラス名をつける(使いまわせるように)。

<divclass="wrapper clearfix"><mainclass="main"></main><divclass="sidemenu"></div></div>

擬似要素を使用しclear: both;とし(もしくは 'clear: left;')、floatを解除することで、高さを認識できるようになり、この問題を解決することができる。
https://saruwakakun.com/html-css/basic/before-after

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

スクリーンショット 2019-11-05 12.29.18.png


Viewing all articles
Browse latest Browse all 8691

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>