四个div在同一个布局环境BFC，在哪个bfc中啊？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style> 
  * { padding:0; margin:0; }
  #red, #yellow, #orange, #green { width:100px; height:100px; float:left; } 
  #red { background-color:red; }
  #yellow { background-color:yellow; } 
  #orange { background-color:orange; } 
  #green { background-color:green; }
</style>
</head>
<body>
  <div id="c1">
    <div id="red">
    </div>
    <div id="yellow">
    </div>
  </div>
  <div id="c2">
    <div id="orange">
    </div>
    <div id="green">
    </div>
  </div>
  <p>Here is the text!</p>
</body>
</html>

该段代码本意要形成两行两列的布局，但是由于#red，#yellow，#orange，#green四个div在同一个布局环境BFC中，因此虽然它们位于两个不同的div（#c1和#c2）中，但仍然不会换行，而是一行四列的排列。

我来问：四个div在同一个布局环境BFC，在哪个bfc中啊？4个浮动的div是4个bfc环境？

慧女神

浏览 1802回答 1

1回答

Walk_

拙见：问题一：四个div不处于同一个BFC中。问题二：4个浮动的div是4个bfc环境。

0 0

随时随地看视频慕课网APP