/* 元素浮动:
float属性设置浮动,元素脱离文档流
none,默认值,元素处于文档流中
left,元素左浮动
right,元素右浮动
浮动元素不超出其父元素
浮动元素之下的元素向上补齐
浮动元素之上为没有浮动的块元素,则该元素不超过其上元素
一行容不下多个浮动元素,则换行
浮动的元素不会覆盖文本内容
*/
/* 高度塌陷:
子元素设置浮动,脱离文档流,父元素height不被子元素撑开,父元素高度塌陷
*/
/*
BFC(Block Formatting Context):页面元素的隐含属性,默认关闭
开启BFC后,元素可以:
1.父元素的垂直外边距不和子元素重叠
2.不被浮动元素覆盖
3.可以包含浮动的子元素
开启BFC解决浮动的高度塌陷:
1.设置元素浮动
2.设置元素绝对定位
3.设置元素为inline-block
4.设置overflow为非visible
*/
/* 新建DIV元素解决高度塌陷:
clear:
none,默认值,不清除浮动的影响
left,清除左浮动对本元素的影响
right,清除右浮动对本元素的影响
both,清除对本元素最大影响的浮动的影响
父元素最后添加<div style="clear:both;"></div>
*/
/* 伪类解决高度塌陷(推荐):
::after
在元素结尾处添加指定内容
*/
.clearFix::after {
content: '';
display: block;
clear: both;
}
float
最新推荐文章于 2023-02-07 20:55:43 发布