首页 > 代码库 > 坑爹的BFC;块格式上下文

坑爹的BFC;块格式上下文

2024-07-26 21:53:32   218人阅读

BFC就是一写正常流，浮动流布局的一写规则，比如（BFC会自动计算元素内部的高度适应到父级,PS{ 可以用来清浮动} ）：

<!doctype html><head>    <meta charset="utf-8" />    <title>Clear float</title>    <style>        .container{            margin: 30px auto;            width:600px;            height: 300px;        }        .wrapper{            border:solid 3px #a33;        }        .main{            width: 100px;            height: 100px;            background-color: #060;            margin: 10px;            float: left;        }    </style></head><body>    <div class="container">        <div class="wrapper">            <div class="main"></div>            <div class="main"></div>            <div class="main"></div>        </div>    </div>        <div class="container">                <div class="wrapper" style="float:left;">            <div class="main">1</div>            <div class="main">2</div>            <div class="main">3</div>        </div>    </div></body></html>

2:BFC的另一个规则，（BFC不会与浮动的元素发生叠加）：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><style>    body {        position: relative;    }    .aside {        width: 100px;        height: 150px;        float: left;        background: #f66;    }    .main {        height: 200px;        background: #fcc;    }    .hd{        overflow:hidden;    }</style>    <div class="aside"></div>    <div class="main"></div>    <br>    <div class="aside"></div>    <div class="main hd"></div></body></html>

 

link_from

　　http://www.cnblogs.com/coco1s/p/3974077.html

and

　　http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

坑爹的BFC;块格式上下文


联系
我们