CSS如何强制容器显示在前面的容器下面，该容器的元素向左浮动

Question

我希望显示“D”的div显示在显示“A”的那个下方，以便具有匹配背景颜色的div显示为堆叠在一起。但是，我得到了这个：

在我的CSS代码中，我必须清除浮动吗？

#container {
  background-color: #333333;
  width: 990px;
}
#left {
  background-color: red;
  width: 300px;
  float: left;
}
#splitter {
  background-color: green;
  width: 90px;
  float: left;
}
#right {
  background-color: blue;
  width: 200px;
  float: left;
}

<div id="container">
  <div id="left">A</div>
  <div id="splitter">B</div>
  <div id="right">C</div>
</div>
<div id="container">
  <div id="left">D</div>
  <div id="splitter">E</div>
  <div id="right">F</div>
</div>

Answer 1

清除容器中的浮子。 您有3种简单的方法：

<强> 1。浮

UPDATE [table_name] AS T1,
      (SELECT [column_name] 
        FROM [table_name] 
        WHERE [column_name] = [value]) AS T2 
  SET T1.[column_name]=T2.[column_name] + 1
WHERE T1.[column_name] = [value];

<强> 2。溢出

#container {
  clear: both;
}

第3。 Micro clearfix hack

Link

Answer 2

你必须处理花车，为此你需要了解float和BFC是什么：

有几种方法可以做到这一点，一旦你阅读了一些有关浮点数，清除和阻止格式化背景的信息，就应该理解。

（下面的代码段中的最后一个示例，旧的，甚至避免浮动但是布局）

/* DEMO purpose :  Show the id or class being used on that container*/

section:before {
  content: attr(id)' 'attr(class);
  display: table;
  background: #177EE5;
  padding: 5px;
  margin: 5px;
  color: #fff;
  text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
  letter-spacing: 1px;
  font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */

.container {
  background-color: #333333;
  width: 990px;
}
.left {
  background-color: red;
  width: 300px;
  float: left;
}
.splitter {
  background-color: green;
  width: 90px;
  float: left;
}
.right {
  background-color: blue;
  width: 200px;
  float: left;
}
/* wrapper for each examples */

section {
  clear: both;
  overflow: hidden;
  margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */

/* table */

.table .container {
  display: table;
}
/* overflow */

.overflow .container {
  overflow: hidden;
}
/* float */

.float .container {
  float: left;
}
/* flex */

.flex .container {
  display: flex;
}
/* inline-block */

.inline-block .container {
  display: inline-block;
  vertical-align: top;
}
/* last examples without floats */

/*no float & ie8 */

#table div {
  float: none
}
#table #first-row,
#table > div {
  display: table-row;
}
#table > div > div {
  display: table-cell;
}
#table {
  background-color: #333333;
  width: 990px;
  table-layout: fixed;
}
#left {
  width: 300px;
}
#splitter {
  width: 90px;
}
#right {
  width: 200px;
}
#table > div > div {
  background-color: red;
}
#table > div > div + div {
  background-color: green;
}
#table > div > div + div + div {
  background-color: blue;
}
#table:before {
  display: table-caption;
  width: 100%;
  margin: 0;
}
#table > div:after {
  content: "Notice there's a gap to fill here since cols do not cover the 990px";
  display: table-cell;
}

<section class="your CSS :-: no BFC involved">
  <div class="container">
    <div class="left">A</div>
    <div class="splitter">B</div>
    <div class="right">C</div>
  </div>
  <div class="container">
    <div class="left">D</div>
    <div class="splitter">E</div>
    <div class="right">F</div>
  </div>
</section>
<section class="table">
  <div class="container">
    <div class="left">A</div>
    <div class="splitter">B</div>
    <div class="right">C</div>
  </div>
  <div class="container">
    <div class="left">D</div>
    <div class="splitter">E</div>
    <div class="right">F</div>
  </div>
</section>
<section class="overflow">
  <div class="container">
    <div class="left">A</div>
    <div class="splitter">B</div>
    <div class="right">C</div>
  </div>
  <div class="container">
    <div class="left">D</div>
    <div class="splitter">E</div>
    <div class="right">F</div>
  </div>
</section>
<section class="float">
  <div class="container">
    <div class="left">A</div>
    <div class="splitter">B</div>
    <div class="right">C</div>
  </div>
  <div class="container">
    <div class="left">D</div>
    <div class="splitter">E</div>
    <div class="right">F</div>
  </div>
</section>
<section class="flex">
  <div class="container">
    <div class="left">A</div>
    <div class="splitter">B</div>
    <div class="right">C</div>
  </div>
  <div class="container">
    <div class="left">D</div>
    <div class="splitter">E</div>
    <div class="right">F</div>
  </div>
</section>
<section class="inline-block">
  <div class="container">
    <div class="left">A</div>
    <div class="splitter">B</div>
    <div class="right">C</div>
  </div>
  <div class="container">
    <div class="left">D</div>
    <div class="splitter">E</div>
    <div class="right">F</div>
  </div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
  <div id="first-row">
    <div id="left">A</div>
    <div id="splitter">B</div>
    <div id="right">C</div>
  </div>
  <div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
  </div>
</section>

可能会有相同的代码块和浮动子代的更多示例。

Answer 3

<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}

#left{
background-color: red;
width:300px;
float:left;
}

#splitter{
background-color: green;
width:90px;
float:left;
}

#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
    <div id="left">A</div>
    <div id="splitter">B</div>
    <div id="right">C</div>
</div>
<div class="container">
    <div id="left">D</div>
    <div id="splitter">E</div>
    <div id="right">F</div>
</div>
</body>

结果是

Answer 4

这是你想要做的兄弟.. 这一个是使用display:inline-block https://jsfiddle.net/p4domjrb/ 这个是使用float:left https://jsfiddle.net/p4domjrb/1/

.container {
  background-color: #333333;
  width: 990px;
  display: block;
  position: relative;
}
.left {
  background-color: red;
  width: 300px;
  display: inline-block;
  margin-left: -4px;
}
.splitter {
  background-color: green;
  width: 90px;
  display: inline-block;
  margin-left: -4px;
}
.right {
  background-color: blue;
  width: 200px;
  display: inline-block;
  margin-left: -4px;
}

请勿使用id我建议使用class，因为id只被调用一次。