CSS浮动--浮动的使用/清除浮动

CSS浮动

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。

网页布局准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘

!!!浮动特性(重要):

  • 脱离标准普通流的控制(浮)移动到指定位置(动),(俗称“脱标”)
  • 浮动的盒子不再保留原先的位置
  • 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列
  • 浮动的元素是互相贴靠在一起的,不会有缝隙,若父级盒子装不下这些浮动的盒子,多出的盒子会另起一行对齐
  • 浮动的元素具有行内块元素的特性
  • 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

浮动元素经常和标准流父级搭配使用

线用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,复合网页布局第一准则

清除浮动

由于父级盒子很多情况下不方便给高度,但子盒子浮动由不占位置,就会影响下面的标准流盒子,因此引入清除浮动
清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题。
语法:
选择器{clear:属性值}
属性值:
left:清除左侧浮动的影响
right:清除右侧浮动的影响
both:同时清除左右两侧浮动的影响(最常用)

清除浮动的策略是:闭合浮动

方法一:额外标签法

也称隔墙感
会在浮动元素末尾添加一个空的标签,例<div style="clear:both"></div>或者其他标签<br>
//要求这个新的空标签必须是块级元素
优点:通俗易懂,书写方便
缺点:添加很多无意义的标签,结构化较差

方法二:父级添加overflow法

可以给父级添加overflow属性,将其属性值设为hidden(最常用),auto或scroll
优点:简洁
缺点:无法显示溢出的部分

方法三: :after伪元素法

是额外标签法的升级版,也是给父元素添加
代码:

.clearfix:after {
      content: "";
      display: block;  /*要转换为块元素*/
      height: 0;
      clear: both;   /*核心代码*/
      visibility: hidden;
    }
    
    .clearfix {/*控制兼容性*/
      /* IE6.7专用 */
      *zoom: 1;
    }

<div class="box clearfix">第一个</div>

优点:没有增加标签,结构更简单
缺点:要照顾低版本浏览器

方法四:双伪元素清除浮动

也是给父元素添加
代码:

.clearfix:before,
.clearfix:after {
content: "";
display: table;
}

.clearfix:after {
clear: both;
}

/* ie 6 7 专门清除浮动的样式*/
.clearfix {
*zoom:1;
}

<div class="box clearfix">第一个</div>

优点:代码更简洁
缺点:照顾低版本浏览器
代表网站:小米,腾讯

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页