• 理解浮动款式的作用

    盒子默认是从上往下进行排列，当咱们须要将盒子进行从左往右进行排列时，须要应用浮动款式，扭转盒子的排列形式

  • 理解浮动款式的特点

    1. 设置浮动后，盒子将脱离文档流，不占据地位
    2. 设置浮动后，前面没有设置浮动的盒子占据它的地位，外面文字内容不会被遮住
    3. 多个盒子设置浮动，会横向排列，如果总宽度大于窗口宽度，前面放不下的元素将被挤到下一行显示
    4. 设置浮动的元素最好包在一个大盒子里

  • 设置浮动语法

    float:none  1. 左浮动——left  2. 右浮动——right  3. 不浮动——none

  • 革除浮动

    • 当元素设置浮动后，会脱离文档流，影响其余元素，为了不影响其余元素，须要革除浮动带来的影响
    • 原理：设置革除浮动后，浏览器主动给元素增加一个外边框，使其不受影响
    clear::after,clear::before{  clear: both;}  1. 革除左侧浮动元素对元素的影响——left  2. 革除右侧浮动元素对元素的影响——right  3. 革除浮动元素对元素的影响最大的一侧——both