- 浮动会使元素尽量向左或向右移动，直到碰到包含框或另外一个浮动元素的盒子模型的边缘,包含框并不会改变里面浮动元素的宽高，浮动元素宽高不会限制在包含块以内
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
}
.container {
width:110px;
height:100px;
border:1px solid blue;
}
.block1 {
width:500px;
height:50px;
border:1px solid red;
float:right;
}
</style>
</head>
<body>
<div class="container">
<div class="block1"><span>块1</span></div>
</div>
</body>
</html>
上例中，block1会保持500px的宽度，但container并不会移动位置让block1显示完全，container位置不会变，block1超出container部分会绘制到浏览器左侧以外看不到
把float改为left，就可以清晰看到block1超出container边框
但是，浮动元素会尽量使自己绘制在包含框内
以下block2会另起一行，而不是接着block1，因为另起一行会使block2超出包含框少一点
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
}
.container {
width:110px;
height:100px;
border:1px solid blue;
}
.block1 {
width:50px;
height:50px;
border:1px solid red;
float:left;
}
.block2 {
width:100px;
height:50px;
border:1px solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="block1"><span>块1</span></div>
<div class="block2"><span>块2</span></div>
</div>
</body>
</html>
- 块级浮动元素的宽高如果不设置，他们的宽高就由内容决定（类似内联元素），这个跟普通块级元素不一样（普通块级元素宽会充满父元素，高由内容决定）
包含块的高度如果不设置，里面全部是浮动元素的话，因为浮动元素时脱离文档流的，就会出现高度为0的情况，即高度塌陷
比如：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
}
.container {
border:1px solid blue;
}
.block1 {
width:100px;
height:50px;
border:1px solid red;
float:left;
}
.block2 {
width:100px;
height:50px;
border:1px solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="block1"><span>块1</span></div>
<div class="block2"><span>块2</span></div>
</div>
</body>
</html>
- 可以在后面加一个div，使用clear清除浮动，撑起包含块
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
}
.container {
border:1px solid blue;
}
.block1 {
width:100px;
height:50px;
border:1px solid red;
float:left;
}
.block2 {
width:100px;
height:50px;
border:1px solid red;
float:left;
}
.block3{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="block1"><span>块1</span></div>
<div class="block2"><span>块2</span></div>
<div class="block3"><span></span></div>
</div>
</body>
</html>
- 这种方式比较别扭，一般使用伪元素解决
::after 伪元素在元素最后添加内容（::begin在元素最前面添加内容）
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
}
.container {
border:1px solid blue;
}
.block1 {
width:100px;
height:50px;
border:1px solid red;
float:left;
}
.block2 {
width:100px;
height:50px;
border:1px solid red;
float:left;
}
.clearfix::after{
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="block1"><span>块1</span></div>
<div class="block2"><span>块2</span></div>
</div>
</body>
</html>
after默认为inline元素，inline元素的clear不起作用，所以要改成block元素同时还要对after设置内容（content，此处只为清浮动，设置内容为空即可），否则无效
注意after是添加在div class="container clearfix"这个div的内部的最后面，而不是在这个div的外面
网友评论