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

巴特西

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

浮动

1 浮动概念

浮动的现象

标准文档流

2. 浮动带来的问题

3 .清除浮动问题的方式

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

最新文章

热门文章