浮动
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或右浮动，碰到父元素边界、其它元素才停下来
3、相邻浮动的元素块可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素的间隙问题)
5、浮动元素后面没有浮动元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素如果没有设置尺寸(一般不设置高度)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
7、浮动元素之间没有垂直margin合并
<!-- 浮动布局 用列表制作菜单-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.menu{
width:694px;
height: 50px;
/*background-color: yellow;*/
/*去掉li标签前面的小圆点*/
list-style:none;
/*ul标签默认有margin和padding值，重新设置覆盖掉默认的*/
margin:50px auto 0;
padding:0;
/* font-size: 0;*/
}
.menu li{
width:98px;
height:48px;
background-color: #fff;
border:1px gold solid;
display: inline-block;
/* font-size: 16px; */
float:left;
margin-left: -1px;
}
.menu li a{
/*把a变成块元素，设置尺寸，增大鼠标相应区域*/
display: block;
width:98px;
height:48px;
text-align: center;
line-height:48px;
text-decoration: none;
color:pink;
}
.menu li a:hover{
background-color:#f00;
}
</style>
</head>
<body>
<!-- ul.menu>(li{公司简介})*7 -->
<ul class="menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">公司动态</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司简介</a></li>
</ul>
</body>
</html>
清除浮动方法：
1、父级增加属性overflow:hidden
2、在最后一个子元素后面加一个空的div，给它样式属性style="clear:both"(不推荐)
3、使用成熟的清除浮动样式类，clearfix
.clearfix:after,.clearfix:before{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
这三句把解决margin-top塌陷和清除浮动写到一起了(前两句)，最后一句是针对非标准浏览器(ie)可能不认after、before标签。
解决margin-top塌陷：
.clearfix:before{
content="";
display:table;
}
清除浮动：
.clearfix:after{
content="";
display:table;
clear:both;
}
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.list{
width:210px;
/* height: 400px;*/
border:1px solid #000;
list-style: none;
margin:50px auto 0;
padding: 0;
/*第一种清除浮动方法：*/
/*overflow: hidden;*/
}
.list li{
width:50px;
height: 50px;
background-color: gold;
margin:10px;
float: left;
}
/*第三种清除浮动方法：*/
/*.clearfix:after{
content: "";
display: table;
clear:both;
}*/
/*清除浮动和解决margin-top塌陷：*/
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{zoom:1;}
</style>
</head>
<body>
<!-- ul>li{$}*7 -->
<ul class="list clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<!-- 第二种清除浮动方法： -->
<!-- <div style="clear:both"></div> -->
</ul>
</body>
</html>
浙公网安备 33010602011771号