CSS外枠高さ自動適応
2861 ワード
フローティングfloatがある場合、最外枠はコンテンツの高さに従わずに高くなります.
解決策1:フローティングclear:bothをクリアする
解決方法2:最外枠にoverflow:hiddenを加える.zoom:1;
解決策3:外枠に属性content:"";display: table;line-height: 0;clear: both;
CSS最小高さと適応高さの両立
解決策1:フローティングclear:bothをクリアする
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
.wrap{background:red;width:1000px;margin:auto;}
.left,.right{float:left;height:50px;}
.left{width:960px;background:red;}
.right{width:40px;background:green;}
.clear{clear:both;}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
</body>
</html>
解決方法2:最外枠にoverflow:hiddenを加える.zoom:1;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
.wrap{background:red;width:1000px;margin:auto;overflow:hidden; zoom:1;}
.left,.right{float:left;height:50px;}
.left{width:960px;background:red;}
.right{width:40px;background:green;}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
解決策3:外枠に属性content:"";display: table;line-height: 0;clear: both;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
.wrap:before, .wrap:after {content: "";display: table;line-height: 0;clear: both;}
.wrap:after {clear: both;}
.wrap {margin: 0 auto;width: 1000px;}
.left,.right{float:left;height:50px;}
.left{width:960px;background:red;}
.right{width:40px;background:green;}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
CSS最小高さと適応高さの両立
div{_height:200px; min-height:200px
/* : , */}