10. CSS 排版

1、标准流（文档流/普通流）

• 默认排版
• CSS的元素分为块级、行内、行内块级
• 块级是垂直排版，行内、行内块级是水平排班
• display属性
  • inline 行内
  • inline-block 行内块级
  • block块级

2、浮动排版 float属性

• 水平排版，只能设置元素左对齐或者右对齐
• margin：0 auto 无效
• 不区分块级、行内、行内块级元素

3、浮动元素脱标

 .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: burlywood;
        }

• 标准排版会盖住浮动排版

4、隔墙法

• 外墙法 clear: both

    
    
    


    

        
我是文字1
        
我是文字2
        
我是文字3
    
    

    

        
我是文字4
        
我是文字5
        
我是文字6
    

• 内墙法

    

        
我是文字1
        
我是文字2
        
我是文字3
        

    
    

        
我是文字4
        
我是文字5
        
我是文字6
    

5、overflow:hidden

• 超出标签的范围的内容裁剪掉，
• 也可以清除浮动
• 让里面的盒子设置margin-top之后，外面的盒子不被顶下来