一、float的基本规律
规律1：
标准流模型中的块级盒子，默认宽度100%； 而浮动的块级盒子，宽度不会自动伸展，而是由内容（文字、padding）撑开； 浮动后的行级元素，可以设置宽度高度等属性。 规律2： 当一个盒子浮动后，标准的其他未浮动盒子将视浮动盒子不存在而占据浮动盒子原来的位置（浮动盒子会盖在未浮动盒子上面）。但是，未浮动盒子中的文字内容，将会收到浮 动盒子宽度的影响（浮动盒子不能盖住未浮动盒子的文字内容） >>>浮动能够打破文档流，但是不能打破文字流。 规律3： 可以设置clear属性是标准流中的其他盒子不受之前盒子的浮动影响。 规律4 如果父盒子没有指定高度，而父盒子中的所有盒子全部浮动，将导致父盒子的高度塌陷，也就是高度无法被子盒子撑开而变为0.二、解决子盒子浮动，父盒子高度塌陷的问题 ①、给父盒子添加overflow：hidden属性.！！！最常用！！！ ②、让父盒子也浮动！！ ③、在父容器的最后添加一个高度为0的空div，并添加clear:both；属性清除掉浮动的影响 ④、使用伪对象选择器::after生成一个空的元素。 #i::after{ display: block; content: ” “; height: 0px; clear: both; }三、练习实例
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>贵美商城</title>
<style type=”text/css”>
*{
padding: 0px;
margin: 0px;
}
span{
text-decoration: underline;
}
#div{
background-image: url(image/TIM图片20180310153452.gif);
width: 200px;
height: 330px;
background-repeat: no-repeat;
}
#div .ul{
/*解决ul中所有li浮动以后，ul高度变为0的问题*/
overflow: hidden;
}
#div .title{
color: #FF7300;
text-indent: 66px;
}
#div .ul li{
list-style: none;
width: 65px;
height: 35px;
font-size: 14px;
line-height: 50px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div>
<span>你好，欢迎访问贵美商城！</span>
</div><br />
<div id=”div”>
<div style=”height: 36px;”></div>
<h4 class=”title”>家用电器</h4>
<ul class=”ul”>
<li>大家电</li>
<li>电冰箱</li>
<li>电视机</li>
<li>洗衣机</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
</ul>
<div style=”height: 20px;”></div>
<h4 class=”title”>家用电器</h4>
<ul class=”ul”>
<li>大家电</li>
<li>电冰箱</li>
<li>电视机</li>
<li>洗衣机</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
</ul>
</div>
</body>
</html>
