关于浮动和清除浮动的一点想法

在CSS中有一个很重要的页面布局方法就是浮动(float),与定位,inline-block一起使用能让我们更好的理解布局

首先什么是浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样

最初,引入 float 属性是为了能让 web 开发人员实现简单的布局,包括在一列文本中浮动的图像,文字环绕在它的左边或右边。但 Web 开发人员很快意识到,任何东西都可以浮动,而不仅仅是图像,所以浮动的使用范围扩大了。现在,浮动通常用来创建整个网站布局,其中包括浮动的多列信息,因此它们彼此并排放置(默认行为是列彼此之间互相堆叠,按照它们在源中出现的顺序)

浮动元素

浮动的副作用

虽然浮动能在页面布局上产生良好的作用,但是浮动仍有其副作用,主要是两点:

  • 对后续元素位置产生影响
  • 父容器元素高度计算出现问题(父容器不能识别浮动元素是否存在),使父元素高度产生坍陷
    
    
期待产生的效果
实际产生的效果

父容器并没有把浮动的子元素包围起来,俗称塌陷,为了消除这种现象,我们需要一些清除浮动的技巧

清除浮动

  1. 使用带clear属性
    clear属性规定元素的哪一侧不允许其它之前浮动元素,也就是说我们可以在其父元素后面加一个块级元素,其属性为clear:left,左侧所有元素都不能浮动,那么父元素就不会坍陷了
  
  1. 使用CSS的:after伪元素
    给浮动元素的父容器添加一个伪元素after,伪元素设置为块级元素,内容为空,清理浮动,使后面的块级元素不会占据前一个浮动元素位置导致版面问题

  1. 使用CSS的overflow属性
    给浮动元素的容器添加overflow:hidden;overflow:auto;可以清除浮动,例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。

参考文章

你可能感兴趣的:(关于浮动和清除浮动的一点想法)