欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

清除(闭合)浮动的几种方案!快乐清除浮动~

程序员文章站 2022-03-29 17:26:23
...

前置知识

一般我们使用那些定位?

1. staic(普通定位流/默认)

  • block || inline 从上到下 || 从左到右排列布局

2. float(浮动定位)

  • value:(none/left/right)
  • 会脱离文档流,但仍然属于父元素

3. position

  • value:(relative/absolute/fixed/sticky)

relative

相对原位置偏移某些距离,但仍然占据原位置的空间
不脱离文档流(或许?,因为偏移了以后仍然占据原空间)

absolute

寻找父元素的relative,一直向上找青蛙,直到(html/body)
脱离文档流

fixed

将element固定在窗口的某个相对位置,不随着滚动条的位置变化而变化
脱离文档流

注意!

0. 浮动定位解决的问题多个块级元素在同一行显示

1. block element允许修改尺寸,inline 不允许修改尺寸

2. 若“一行”内显示不下所有float内容last element则会换行

3. block or inline or inline-block 再浮动后都会变成block


正片! 如何清除浮动 or 闭合浮动?

Q: 为什么浮动这么好却要 清除(闭合)浮动?

A:


1. clear : 译为清除,以下取值详解

2. 闭合浮动:使浮动元素“闭合”减少浮动带来的影响


plan 1:给父元素添加空子元素(after),设置clear:both,简单点说就是添加额外的标签

  • clear:none 默认,不做任何操作
  • clear:left 清除前面元素带来的所有左浮动影响
  • clear:float 和楼上类似效果
  • clear:both 清除前面元素所有浮动带来的影响

优势:代码量少,易学,好懂
劣势:推荐

.clearfix::after{
    content: ''; //添加空元素
    display: block;//设置成块级元素
    clear: both;//清除前面浮动带来的所有效果
}

plan 2: 添加
标签,通过其本身HTML特性

  • 在浮动元素的父元素下添加一个last child 标签为<br clear=“both”/ >
  • OK!

优势: 代码量更少
劣势:同有违结构和表现的分离,不推荐

plan 3:添加 overflow:hidden;

  • 在浮动元素的父元素下添加CSS样式 overflow:hidden

优势:代码量更更少了
劣势:内容增多会造成不会自动换行导致内容被隐藏,无法显示要溢出的内容
注意:(这个bug写者并没有实验出来),但既然已经有人排过雷便少使用此方法罢。

plan 3:添加 overflow:auto;

  • 在浮动元素的父元素下添加CSS样式 overflow:auto

优势:代码量更更更少了…
劣势:冒失雷挺多的,不要使用

plan 5:添加 display:table;

  • 在浮动元素的父元素下添加CSS样式 display:table;

优势:代码量… 懂的
劣势:盒模型属性改变,造成的影响可能比带来的好处要大,不推荐

小结: