Float浮动
Float特征：
1.块在一排显示
2.支持内联宽度
3.默认内容支撑宽度
4.脱离文档流
5.提升层级半层
Float产生的影响：
float有脱离文档流的特性使其与父级不在同一文档流，从而影响布局。
例如以下代码：item没有撑起box的高度
<head>
<style> .box{ border: 2px solid #00008B; } .item{ background-color: red; width: 100px; height: 100px; float: left; } </style> </head> <body> <div class="box"> <div class="item"></div> </div> </body>
清除Float方法：
1.加高度（扩展性不好）
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border: 2px solid #00008B;
height: 100px;
}
.item{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
2.父级浮动（页面中所有元素都加浮动，会影响margin左右自动失效）
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border: 2px solid #00008B;
float: left;
}
.item{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
3.inline-block（margin左右auto失效）
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border: 2px solid #00008B;
display: inline-block;
}
.item{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
4.空标签（ie6最小高度16px）
<head>
<meta charset="UTF-8">
<title></title>
<style>
.fix{
clear: both;
}
.box{
border: 2px solid #00008B;
}
.item{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="fix"></div>
</div>
</body>
5.br
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border: 2px solid #00008B;
}
.item{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<br clear="all"/>
</div>
</body>
6.after伪类（content属性）
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box:after{
content: " ";
clear: both;
display: block;
}
.box{
border: 2px solid #00008B;
}
.item{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
7.overflow（hidden | scroll等）
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
border: 2px solid #00008B;
overflow: hidden;
}
.item{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
浙公网安备 33010602011771号