css浮动

标准文档流

特性

1. 空白折叠现象：无论多少个空格，换行，tab，都会被折叠为一个空格
2. 高矮不齐，底边对齐
3. 自动换行，一行写不满，换行写

行内元素和块级元素

1. 区别
   • 行内元素：不换行，不可以设置宽高
   • 块级元素：独占一行，可以设置宽高
2. 标签分类
   • 文本级：span a b i u
   • 容器级：p div h系列 li dt dd

行内元素和块级元素的相互转换

1. 块级元素转换为行内元素display：inline；
   • 此时的元素不可以设置宽高，可以和其他元素并排
2. 行内元素转换为块级元素display：block；
   • 此时元素可以设置宽高，独占一行

浮动的性质

1. 浮动元素拖标
2. 浮动元素相互依靠
3. 浮动元素有字围效果
4. 收缩

浮动的清除

1. 加高法：给浮动元素的祖先元素添加高度--如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。
2. clear：both;:不允许左侧和右侧有浮动对象
   • 问题：使用这个属性后，它所在的标签，margin属性失效了
3. 隔墙法
   • 内墙法：在box中修一堵墙，就可以让box被儿子撑出高度
   • 外墙法：在两个div（没有高度）中加入一个div（有高度）
   • 修建的墙用clear:both;修饰
4. overflow：hidden;:所有溢出边框的内容，都要隐藏掉。设置这个属性，可以让div撑出高度
5. 伪元素

div::after{
    content:"";
    clear:both;
    display:block;
}