<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="muyou">
<meta name="Keywords" content="牧佑叔叔">
<meta name="Description" content="牧佑">
<title>Document</title>
<style>
p {
width:200px;
border:1px solid #000;
}
p:after {
content:"慧我爱你";
background:red;
display:block;
}
.box {
weight:200px;
border: 1px solid #000;
}
.div1 {
width:100px;
height:100px;
background:red;
float:left;
}
.clear {
zoom:1;
}
.clear:after {
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<!--box clear 清除浮动在父级样式class后面加一个空格
.clear:after {
content:"";
display:block;
clear:both;
}
-->
<!--
浮动定义：
使元素脱离文档流，
按照指定方向发生运动
遇到父级边界或者相邻的浮动元素停下来
文档流：是文档可现实对象在排列时所占用的位置
float：left}right|none|inherit
clear:left|right|both|none|inherit
元素某个方向上不能有浮动元素
clear:both左右两侧不允许浮动
-->
<!-- span 换行的时候 加空格 字体不一样空格大小不一样
去掉空格需要添加 float：left 即可
-->
<!--父级浮动 页面中所有元素都加浮动margin左右自动失效
inline-block 清浮动方法；
问题 margin左右自动失效；
-->
<!--
zoom:1; IE6 兼容
display:block; 空标签设置成块级元素
clear:both; 清除浮动。 -->
<!--after 伪类选择器 -->
<!--清除浮动 都是在父级元素上面来做的 -->
<div class="box clear">
<div class="div1">
</div>
</div>
<!-- <p></p> -->
</body>
</html>
当给父级设置复合下面规则的时候 -----------------------------------------------------------------------------------------------------
子级是可以清除浮动的 - ------------------------------------------------------------------------------------------------------
<!--
BFC(block formatting context) 标准浏览器
块级格式化上下文
a. float的值不为none
b. overflow的值部位visible
c. display的值为table-cell，table-caption
,inline-block中的任何一个
d.position的值不为relative和static
e.width|height|min-width|min—height:(!auto)
haslayout IE浏览器
a.writing-mode:tb-rl
b.-ms-writing-mode:tb-rl
c.zoom:(!normal)
-->
