李虎跃-20221115

今日内容

• CSS的浮动
• 传统网页布局的三种方式（标准流、浮动、定位）
  
  • 标准流（标签按照默认的方式进行排列）
    
    • 块元素会独占一行，从上到下顺序排列
      
    • 行内元素是按照顺序，从左到右依次排列，碰到父元素的边缘就会自动换行
      
  • 浮动
    
    • 为什么需要浮动
      
      • 很多的布局效果用标准流无法完成，浮动可以更好的来控制盒子的位置。
        
    • 浮动的属性
      
      • float
        
        • 值
          
          • none：元素不浮动（默认值）
            
          • left：左浮动
            
          • right：右浮动
            
    • 总结：
      
      • 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
        
      • 浮动最典型的应用就是让多个块级元素一行内排列显示
        
    • 浮动的特性
      
      • 1、浮动的元素会脱离标准流
        
      • 2、浮动的元素会一行内显示并且沿元素顶部对齐，相邻的元素之间没有空白间隙，如果超过父级宽度会自动换行显示
        
      • 3、浮动的元素具有行内块元素的特性
        
      • 4、浮动研发之初就是为了实现文字环绕的，所以浮动的盒子并不会压住标准流盒子里面的文字
        
    • 浮动布局的注意点
      
      • 1、先用标准流父元素进行上下排列，内部的子元素采用浮动排列左右的位置。
        
      • 2、理论上来说，当一个元素浮动了，那么它的兄弟元素也要跟着浮动。
        
      • 3、浮动只会影响后面的标准流，不会影响前面的标准流。
        
  • 清除浮动
    
    • 为什么要清除浮动
      
      • 由于父盒子在一些情况下不方便给高度，但是子盒子浮动又不占位置，所以父盒子的高度就会变成0，会影响后面的标准流盒子
        
    • 清除浮动的方法
      
      • 1、额外标签法
        
        • 也叫做隔墙法，是W3C推荐的做法
          
        • 注意点：
          
          • 要求最后的这个新的空标签必须是块级元素
            
        • 优点：
          
          • 通俗易懂、书写方便
            
        • 缺点：
          
          • 会添加很多没有意义的标签，结构化较差
            

提出问题

无
解决方案
无