乐趣区

关于前端学习: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
退出移动版