float

最新推荐文章于 2024-07-17 08:30:00 发布

iteye_16450

最新推荐文章于 2024-07-17 08:30:00 发布

阅读量141

点赞数 1

文章标签：浮动布局存在的问题及解决方法

本文链接：https://blog.csdn.net/iteye_16450/article/details/82671880

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>float布局</title>
<style type="text/css">

/*在此定义相应的类选择器，并根据要求设置相关CSS属性*/
.mainBox{width:960px;  background:#cff; }
.leftBox{width:740px; height:300px; background:#c9f; float:left;}
.rightBox{width:210px; height:300px; background:#fcf; float:right;}
.box{clear:both; height:0; overflow:hidden;}/*盒子清除浮动*/

</style>
</head>

<body>



<div class="mainBox">
    <div class="leftBox"></div>
    <div class="rightBox"></div>
<-- 清楚浮动的盒子 box--!>
    <div class="box"></div>
</div>


</body>
</html>

问题：

浮动会让元素塌陷，即被浮动元素的父元素不具有高度，例如一个父元素包含了浮动元素，它将塌陷具有零高度。浮动元素由于脱离了普通文档流，不再占用原来文档中的位置。因此无法把父元素撑开。

解决方法：

方法一：在浮动元素后加一个div设置clear：both; height:0; overflow:hidden

方法二：使用clearfix

.clearfix:after{

content: ".";

display:block; /*转换为块级元素*/

clear:both;/*清除左右两边的浮动*/

visibility:hidden;/*可见度设为隐藏。注意它和display：none的区别，visibility:hidden仍然占据空间，只是看不到而已*/

height:0;

}