Float 在設計多欄佈局時,是CSS常用的手段。但常常就會遇到的一種情況，就是用來包覆float子元素的父元素無法跟隨float子元素的高度一併延伸：
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</html>
CSS
.container{
margin : 0 auto;
width: 500px;
background: red;
padding: 30px;
}
.left{
background: black;
width : 50px;
height : 300px;
float :left;
}
.right{
background: green;
width : 50px;
height : 300px;
float: right;
}
如果我們希望將父元素將全部子元素都包覆在裡面，可以有幾種方法清除float的效果:
使用Clear屬性的空元素
在浮动元素后使用一个空元素如<div class="clearfix"></div>，并在CSS中赋予 .clearfix{clear:both;}属性即可清除浮动。
在浮動元素後面增加<br/>標籤
<br/>吧有自帶的清楚浮動屬性
父級元素定義overflow:auto屬性
.container{
.over-flow{
overflow: auto; zoom: 1; //zoom: 1; 處理兼容性問題
}
}
沒有留言:
張貼留言