子要素が全て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が上がってしまう。
改善策
親要素に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;}