Float问题及其解决方法
float 属性：
定义元素向哪个方向浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。Float的属性值可以为：left、right、none、inherit等。
注意：
假如在一行上不够容纳整个浮动元素，则该元素会自动跳到下一行，依次往下跳，直到空间足够为止。
例如：
<style>
.content{
width:800px;
float:left;
border:1px solid #000;
}
.left,.right{
width:500px;
height:200px;
border:1px solid #666;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
<body>
<div class="content">
<div class="left">向左浮动</div>
<div class="right">向右浮动</div>
</div>
</body>
// 元素right最终在left下方。
Float属性带来的问题和解决方法：
1.float元素挡住了普通元素。
例如：
<style>
.content{
height:600px;
border:1px solid #CCC;
}
.left{
width:20%;
height:400px;
float:left;
border:1px solid #CCC;
}
.right{
width:20%;
height:400px;
float:right;
border:1px solid #CCC;
}
.main{
margin-left:21%;
margin-right:21%;
height:200px;
border:1px solid #CCC;
}
.footer1{
height:100px;
border:1px solid #CCC;
}
</style>
<body>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div class="footer1">footer没有清除浮动的状态</div>
</div>
</body>
// left和right元素将漂浮在footer1元素上面，挡住了footer1的左右。
解决方法：采用clear属性清除浮动。
例如：
<style>
.content{
height:600px;
border:1px solid #CCC;
}
.left{
width:20%;
height:400px;
float:left;
border:1px solid #CCC;
}
.right{
width:20%;
height:400px;
float:right;
border:1px solid #CCC;
}
.main{
margin-left:21%;
margin-right:21%;
height:200px;
border:1px solid #CCC;
}
.footer2{
height:100px;
clear:both;
border:1px solid #CCC;
}
</style>
<body>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div class="footer2">采用clear清楚浮动后的状态，footer元素出现在底端而且上面有float元素</div>
</div>
</body>
2.普通元素包含了浮动元素时，如果浮动元素高大于普通元素，则浮动元素将会溢出普通元素的范围。
注意：接下来的例子均以浮动一张较大的图片为例，可以自行链接一张图片。
例如：
<style>
img{
float:left;
}
h1{
border:1px solid #000;
}
</style>
<body>
<div class="content1">
<h1><img src="img.jpg" />未处理</h1>
<p>如果非浮动元素中有高于它的浮动元素时，浮动元素会超出非浮动元素的范围。
例如：图片高度超出了h1标签的高度</p>
</div>
</body>
解决方法1：加大父级元素高度，但扩展性不好，因为有时不能完全确定浮动元素的宽高。
<style>
img{
float:left;
}
h1{
height:300px;
border:1px solid #000;
}
</style>
<body>
<div class="content">
<h1><img src="img.jpg" />加大父级元素高度。</h1>
</div>
</body>
解决方法2：采用设置浮动元素的父级元素。
<style>
img{
float:left;
}
h1{
float:left;
border:1px solid #000;
}
</style>
<body>
<div class="content">
<h1 class="h1float"><img src="img.jpg" />采用设置浮动元素的父级元素</h1>
</div>
</body>
解决方法3：采用在浮动元素尾部增加设置了浮动的br元素。
<style>
img{
float:left;
}
h1{
border:1px solid #000;
}
br{
clear:both;
}
</style>
<body>
<div class="content">
<h1><img src="img.jpg" />采用增加设置浮动的br标签<br /></h1>
</div>
</body>
解决方法4：采用给父级元素加overflow。
<style>
img{
float:left;
}
h1{
overflow:hidden;
border:1px solid #000;
}
</style>
<body>
<div class="content">
<h1 class="h1overflow"><img src="img.jpg" />采用给父级元素加overflow</h1>
</div>
</body>
解决方法5：加类名clear，采用after伪类统一处理。（比较推荐）
<style>
img{
float:left;
}
h1{
border:1px solid #000;
}
.clear:after{
content:"";
display:block;
clear:both;
}
</style>
<body>
<div class="content">
<h1 class="clear"><img src="img.jpg" />加类名clear，采用after伪类统一处理</h1>
</div>
</body>
解决方法6：采用dispay:inline-block;但是margin：auto会失效。
<style>
img{
float:left;
}
h1{
display:inline-block;
border:1px solid #000;
}
</style>
<body>
</div>
<div class="content">
<h1 class="h1dispay"><img src="img.jpg" />采用dispay:inline-block;</h1>
</div>
</body>
时间： 2024-08-01 18:59:17