CSS BFC
越胤
CSS BFC
There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence.
The blog content is all parallel goods. Those who are worried about being cheated should leave quickly.
<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<!-- 普通文档流的布局规则：1、浮动的元素是不会被父级计算高度，
父级高度塌陷（破坏性）:子元素有浮动后，那父级元素的高度就变为0（不会自动撑开）
-->
<div style="border: 1px solid red;">
<div style="width: 100px; height: 100px; background: green; float:left;">
</div>
</div>
<!-- br清除浮动 -->
<br clear="all" />
<br>
<!-- BFC的布局规则：1、浮动的元素会被父级计算高度(父级触发了BFC) -->
<!--
<div style="border: 1px solid red; overflow: hidden;">
<div style="border: 1px solid red; overflow: auto;">
<div style="border: 1px solid red; float: left;">
<div style="border: 1px solid red; display: inline-block;">
-->
<div style="border: 1px solid red; overflow: hidden;">
<div style="width: 100px; height: 100px; background: green; float:left;">
</div>
</div>
<br>
<!-- 普通文档流的布局规则：2、非浮动元素会覆盖浮动元素的位置 -->
<div style="border: 1px solid red;">
<div style="width: 100px; height: 100px; background: green; float:left;">hehe</div>
<div style="width: 100px; height: 100px; background: red;">haha</div>
</div>
<br>
<!-- BFC的布局规则：2、非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC) -->
<div style="border: 1px solid blue;">
<div style="width: 100px; height: 100px; background: green; float:left;">hehe</div>
<div style="width: 100px; height: 100px; background: red; overflow: hidden">haha</div>
</div>
<!-- 普通文档流的布局规则：3、margin会传递给父级 -->
<!--
<div style="background: pink; border: 1px solid red;">
-->
<div style="background: pink;">
<div style="width: 100px; height: 100px; background: green; margin-top: 100px;">hehe</div>
<div style="width: 100px; height: 100px; background: red;">haha</div>
</div>
<!-- BFC的布局规则：3、margin不会传递给父级(父级触发了BFC) -->
<div style="background: brown; margin-top: 5px; overflow: hidden;">
<div style="width: 100px; height: 100px; background: green; margin-top: 100px;">hehe</div>
<div style="width: 100px; height: 100px; background: red;">haha</div>
</div>
<!-- 普通文档流的布局规则：4、两个相邻的元素上下margin会重叠 -->
<div style="background: yellow; margin-top: 5px; ">
<div style="width: 100px; height: 100px; background: green; margin: 100px 0;">hehe</div>
<div style="width: 100px; height: 100px; background: red;" "margin: 100px 0;">haha</div>
</div>
<!-- BFC的布局规则：4、两个相邻的元素上下margin不会重叠(给其中一个元素添加一个单独的父级，然后让他的父级触发BFC) -->
<div style="background: yellow; margin-top: 5px; ">
<div style="width: 100px; height: 100px; background: green; margin: 100px 0;">hehe</div>
<div style="overflow: hidden;">
<div style="width: 100px; height: 100px; background: red; margin: 100px 0;">haha</div>
</div>
</div>
</body>
</html>
类似资料：