布局的圣杯及其变化

Question

问题1：我今天学会了布局的圣杯，编码后，浏览器显示我这样的奇怪格式（不是完整的黑色边框）： [

我的代码如下：

 #container {
   border: 10px solid black;
   /*this code cause the umcomplete black border*/
   padding: 0 220px 0 200px;
 }
 .main1 {
   float: left;
   position: relative;
   width: 100%;
   background-color: grey;
   min-height: 100px;
 }
 .left1 {
   float: left;
   position: relative;
   width: 200px;
   margin-left: -100%;
   left: -200px;
   background-color: red;
   min-height: 100px;
 }
 .right1 {
   float: left;
   position: relative;
   width: 220px;
   margin-left: -220px;
   right: -220px;
   background-color: green;
   min-height: 100px;
 }

<div id="container">
  <div class="main1">this is paragraph 1</div>
  <div class="left1">this is paragraph 2</div>
  <div class="right1">this is paragraph 3</div>
</div>

问题2：在我的观点中，如果我做了一些更改，将显示相同的布局，但位置：相对不包括在内。格式仍然很奇怪（中间区域的内容被两个区域覆盖）：

.main2 {
  background-color: grey;
  float: left;
  width: 100%;
  min-height: 100px;
}
/*this is the only new code*/

#main2Inner {
  margin: 0 220px 0 600px;
}
.left2 {
  float: left;
  width: 200px;
  margin-left: -100%;
  background-color: red;
  min-height: 100px;
}
.right2 {
  float: left;
  width: 220px;
  margin-left: -220px;
  background-color: green;
  min-height: 100px;
}

<div id="container2">
  <div class="main2">
    <div id="mianInner">this is paragraph 4 I dont know why some content cannot be displayed</div>
  </div>
  <div class="left2">this is paragraph 5</div>
  <div class="right2">this is paragraph 6</div>
</div>

Answer 1

您正在处理溢出其容器的浮动元素。您可以使用overflow:hidden（或position / float，display）来修改块格式化上下文（BFC）。

＆＃13;

＆＃13;

#container {
  border: 10px solid black;
  overflow: hidden;
  /*keyword : Block Formating Context */
  padding: 0 220px 0 200px;
  min-width: 500px;
  ;
}
.main1 {
  float: left;
  position: relative;
  width: 100%;
  background-color: grey;
  min-height: 100px;
}
.left1 {
  float: left;
  position: relative;
  width: 200px;
  margin-left: -100%;
  left: -200px;
  background-color: red;
  min-height: 100px;
}
.right1 {
  float: left;
  position: relative;
  width: 220px;
  margin-left: -220px;
  right: -220px;
  background-color: green;
  min-height: 100px;
}

＆＃13;

<div id="container">
  <div class="main1">this is paragraph 1</div>
  <div class="left1">this is paragraph 2</div>
  <div class="right1">this is paragraph 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

  

http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

我自己认为

Flex或table display会更可靠

＆＃13;

＆＃13;

#container {
  border: 10px solid black;
  display: flex;
  min-height: 50px;
  box-sizing: border-box;
}
.main1 {
  background-color: grey;
  flex: 1;
}
.left1 {
  order: -1;
  width: 200px;
  background-color: red;
}
.right1 {
  width: 220px;
  background-color: green;
}
#container2 {
  border: 10px solid black;
  height: 50px;
  /* will grow taller if needed */
  display: table;
  width: 100%;
  box-sizing: border-box;
  table-layout: fixed;
}
#container2 > div {
  display: table-cell;
}

＆＃13;

<h1>display:flex</h1>
<div id="container">
  <div class="main1">this is paragraph 1</div>
  <div class="left1">this is paragraph 2</div>
  <div class="right1">this is paragraph 3</div>
</div>

<hr/>
<h1>display:table</h1>

<div id="container2">
  <div class="left1">this is paragraph 1</div>
  <div class="main1">this is paragraph 2</div>
  <div class="right1">this is paragraph 3</div>
</div>

＆＃13;

＆＃13;

＆＃13;