css高度塌陷_CSS浮动和清除浮动学习

什么是浮动&＃xff1f;

css浮动就是浮动元素会脱离文档的普通流并向左或右浮动&＃xff0c;

例子如下

添加了浮动的盒子会进行左右排列

在最初的设计初衷&＃xff0c;浮动就是为了实现文字环绕效果

浮动的特性

a.会脱离文档

来看个例子

如上图所示&＃xff0c;在默认的情况下&＃xff0c;块状元素会独占一行&＃xff0c;子元素会上下排列&＃xff0c;由于给子元素添加了浮动&＃xff0c;脱离文档&＃xff0c;不会影响普通元素的布局&＃xff0c;左右进行排列&＃xff0c;直到遇到下一个浮动元素&＃xff0c;

总结&＃xff1a;一旦元素浮动了&＃xff0c;他将可以并排显示了&＃xff0c;并且可以设置宽高了

b.没有任何的margin合并

先来看个例子

如上图所示&＃xff0c;在没有使用浮动的情况下&＃xff0c;两个块级元素的margin会合并&＃xff0c;按最大的那个进行设置&＃xff0c;

如上图所示&＃xff1a;给box2加了浮动之后&＃xff0c;它们的margin值就不会合并了&＃xff0c;

总结&＃xff1a;如果想让两个块级元素的margin值合并&＃xff0c;就给第二个块级元素加浮动即可

c.浮动元素有字围效果

上面已做介绍这里就不放案例了

总结&＃xff1a;标准流中的文字不会被浮动的盒子遮住

d.导致高度塌陷

先来看个例子

如图所示&＃xff0c;父元素没了高度&＃xff0c;默认情况下子元素会将父元素的高撑开&＃xff0c;由于子元素加了浮动&＃xff0c;导致了高度塌陷&＃xff0c;

总结&＃xff1a;当给子元素设置了浮动&＃xff0c;父元素没有设置高度&＃xff0c;父元素就会出现高度塌陷

写到这里&＃xff0c;了解了什么是浮动以及浮动的特性&＃xff0c;现在来看怎么清除浮动&＃xff0c;也就是说怎么解决高度塌陷问题

clear清除浮动

属性值&＃xff1a;clear:both

原理&＃xff1a;在被清除浮动的元素上边或下边添加足够的清理空间

先来看个例子

如上图所示&＃xff0c;在子元素盒子下面添加clear:both清除浮动&＃xff0c;撑开了高度&＃xff0c;这样就可以了

注&＃xff1a;不要再子元素上清除浮动&＃xff0c;如果这样会导致子元素掉下来

clear的不足

clear只能作用于块级元素&＃xff0c;并且并不能解决后面元素可能发生的文字环绕问题

总结&＃xff1a;clear清除浮动&＃xff0c;就是给盒子增加clear:both&＃xff1b;表示自己的内部元素&＃xff0c;不受其他盒子的影响

BFC清除浮动

BFC全称&＃xff1a;块级格式化上下文&＃xff0c;也可以理解为&＃xff1a;块级元素布局逻辑

BFC的特征&＃xff1a;简单的说&＃xff0c;它是一个隔离容器&＃xff0c;和其他元素互不干扰&＃xff0c;最主要的是BFC有“清除浮动”这一条特性&＃xff0c;那么问题来了&＃xff0c;怎么触发BFC呢&＃xff1f;

BFC的触发方式

可以给父元素添加一下属性来触发BFC&＃xff1a;

• flaot 为 left / right
• postion 为 absolute / fixed
• display 为 inline-block | table | table-cell | table-caption | flex | inline-flex
• overflow 为 hidden | auto | scroll

总结&＃xff1a;我们给父元素加上以上属性就可以解决高度塌陷问题了&＃xff0c;不过我们一般用的最多的是overflow:hidden,兼容性好一点&＃xff0c;当然啦&＃xff0c;BFC的应用不仅仅是清除浮动这么简单&＃xff0c;它还可以实现“自适应两栏布局”以及上面所说的“防止margin上下重叠”问题

到这里&＃xff0c;本章就结束啦&＃xff01;