关于前端学习: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