CSS属性（二）

标准文档流

内容为从左到右，从上到下来排版的。前面的内容的大小会影响后面的内容，高低不齐，底边对齐

块级元素和行内元素

标准文档流讲html标签分成了块级标签和行内标签。

1. 块级标签：所有的容器级标签都是块级标签。文本级标签里的p标签也是一个块级标签。例如：body,div,h系列,ul,ol,li,dl,dt,dd,table,tr,td等。
   • 独占一行，同行不会出现其他的同级标签。
   • 可以设置宽高。不设置的话，会自动继承上级的宽
2. 行内标签：除了p标签之外的所有文本级标签。例如：a,span,img,input等。
   • 行内标签不独占一行，可以与其他的行内元素并排在一行。
   • 行内元素不能设置宽高，其他内边距，边框等可以正常设置。

块级元素和行内元素可以相互转换

这个属性为display：显示模式。
block：块级。
inline：行内（常用）。
inline-block：行内块。

三：浮动

float：浮动。分为left和right。可以让元素以某一方向并排排列，脱离标准文档流，既可以设置宽高又可以一行排列。

• left：左浮动，从左到右依次贴左边布局

• right： 右浮动，从右向左依次贴右边布局

  * {
    margin: 0px;
    padding: 0px;
  }
  div {
    width: 50px;
    height: 50px;
    margin: 10px;
    background: green;
  
    float: left;
  }
  

浮动

• 当标签大小不一，且一行放不下时，会自动换行布局，并且去找临近的盒子去贴边，而不是直接去找最前边的。

  
  
  截屏2020-03-0117.55.58.png

• 不会有margin塌陷的问题。

• 文字围效果
  文字不像盒子背景部分一样，不会被浮动的元素遮盖住，文字会绕开浮动的元素进行排列。

  .content {
            width: 600px;
            height: auto;
            clear: left;
  }
  img {
            float: left;
  }
  

文字围效果

浮动存在的问题

• 浮动元素不能撑开父盒子
• 浮动会影响后面的元素

清除浮动

1. 给父盒子设置高度。但是高度不能自适应了，有局限。
2. 清除浮动属性clear
   值为left，right，both。顾名思义，清除左或右，或者二者的影响。
   clear：left；但是仍然不能撑开父盒子，有局限。
3. 隔墙法
   在相互影响的元素之间加一道墙，阻隔开两边的元素，这个墙添加清除属性。
   • 外墙法： 在有浮动元素的父盒子之间加一道墙。仍然不能解决自适应的问题。
   • 内墙法： 将清除浮动的墙放在有浮动元素的父盒子内部的最后，只要有浮动，就在盒子内部加一堵墙。可以解决问题，但是会添加很多冗余的标签。

/*清除浮动*/
.cl {
    clear: both;
}

    

        
1
        
2
        
3
        
4
        

    
    

        
1
        
2
        
3
        
4
        

    

浮动的影响

内墙法清除浮动

4. overflow：hidden
   盒子内入的元素可以设置溢出模式，隐藏，自动显示。
   属性值：hidden隐藏，auto溢出滚动

.line1 {
   width: 600px;
   background: red;
   clear: left;
   padding: 10px;

   overflow: hidden;
}
.line2 {
   width: 600px;       
   background: yellow;
   clear: left;
   padding: 10px;

   overflow: hidden;
}

实际工作中，在大的结构中，通常加一个外墙来隔开，内部则使用overflow：hidden来清除浮动