CSS样式——浮动样式与清除浮动样式

• 了解浮动样式的作用

  盒子默认是从上往下进行排列，当我们需要将盒子进行从左往右进行排列时，需要使用浮动样式，改变盒子的排列方式

• 了解浮动样式的特点

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

• 设置浮动语法

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

• 清除浮动

  • 当元素设置浮动后，会脱离文档流，影响其他元素，为了不影响其他元素，需要清除浮动带来的影响
  • 原理：设置清除浮动后，浏览器自动给元素添加一个外边框，使其不受影响

  clear::after,clear::before{
    clear: both;
  }
  
    1. 清除左侧浮动元素对元素的影响——left
    2. 清除右侧浮动元素对元素的影响——right
    3. 清除浮动元素对元素的影响最大的一侧——both