css浮动的"巨坑"与完美解决办法

浮动

1 浮动概念

• 如果想实现网页中排版布局，比如一行内显示对应的标签元素，可以使用浮动属性。浮动可以实现元素并排。

• 块转行内日块也可以实现一行显示,不过存在空白折叠现象

• float 浮动

  属性值	描述
  none	表示不浮动，所有之前讲解的HTML标签默认不浮动
  left	左浮动
  right	右浮动
  inherit	继承父元素的浮动属性

  #当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素
  

• 浮动的现象

  我们之前说浮动的设计初衷是为了做”文字环绕效果“。那么我们就来看一下如果对盒子设置了浮动，会产生什么现象？

  • 浮动的元素脱离了标准文档流，即脱标
  • 浮动的元素互相贴靠
  • 浮动的元素会产生”字围“效果
  • 浮动元素有收缩效果

• 标准文档流

  文档流指的是元素排版布局过程中，元素会默认自动从左往后，从上往下的流式排列方式。

  即不对页面进行任何布局控制时，浏览器默认的HTML布局方式，这种布局方式从左往右，从上往下，有点像流水的效果，我们称为流式布局。

2. 浮动带来的问题

• 浮动的元素脱离了标准文档流，即脱标
• 浮动的元素互相贴靠
• 浮动的元素会产生”字围“效果
• 浮动元素有收缩效果
  • 当浮动元素没有设置尺寸,会适应浮动元素内的子元素尺寸
• 浮动的元素不占尺寸,标准流元素可以撑起父级块的尺寸,浮动元素不可以
• 浮动元素设置margin_top不会发生塌陷现象
  • 给标准流元素设置margin-top时会发生margin塌陷

3 .清除浮动问题的方式

• 给浮动元素添加父级块,并设置父级块高度;

  • 不宜维护,不灵活
  • 应用:万年不变导航栏,固定栏;

• 内墙法: 给最后一个浮动元素的后面添加一个空的块级标签,并且设置标签的属性为 clear:both;

  • 冗杂,浪费资源(不推荐)

• 伪元素清楚法(推荐)

  • 在盒子上末尾加一个占位空的块级标签;

  .pa::after{
      content:''
      display: block;
      clear: both;
  }
  

• overflow: hidden;清楚法 (常用)

   # overflow: hidden(超出隐藏) vidible(默认-可见) scroll(滚动显示)
      在父级盒子上设置一个overflow: hidden;
          #注意:hidden(超出隐藏)!!
  

4. BFC(只摘出一小部分以供参考)

• BFC生成规则

  1.内部的Box会在垂直方向，一个接一个地放置。
  2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4.BFC的区域不会与float 元素重叠。
  5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6.计算BFC的高度时，浮动元素也参与计算
  

• 哪些元素会生成BFC

  1.根元素
  2.float属性不为none
  3.position为absolute或fixed
  4.display为inline-block
  5.overflow不为visible