Question

好的，这是我的代码

＆＃13;

<html>
<head>
<style>
.div1{
	height:40px;
	width:40px;
	background-color:red;
	display:block;
	float:left;
}	
.div2{
	height:40px;
	width:40px;
	background-color:green;
	display:block;
	
}
.div3{
	height:40px;
	width:40px;
	background-color:yellow;
	display:block;
}
</style>
</head>

<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>

</html>

＆＃13;

我希望我的网站看起来像这样：第一个方块是红色，旁边是绿色，红色下方是黄色方块。我认为第一个元素上的浮动应该让下一个跳到他旁边。为什么它不起作用？

Answer 1

将float: left;添加到.div2，将clear:left添加到.div3

<html>
<head>
<style>
.div1{
	height:40px;
	width:40px;
	background-color:red;
	display:block;
	float:left;
}	
.div2{
	height:40px;
	width:40px;
	background-color:green;
	display:block;
	float: left;
}
.div3{
	height:40px;
	width:40px;
	background-color:yellow;
	display:block;
    clear: left;
}
</style>
</head>

<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>

</html>

您需要将float:left添加到绿色框中，以使元素站在红色旁边。如果您将float:left添加到黄色方块，它将位于绿色旁边。我们添加了clear: left来“清除”左侧浮动。

详细了解floats。

Answer 2

问题是浮动元素是out-of-flow：

如果一个元素被浮动，那么它就被称为 out of flow 定位，或是根元素。

因此，它们不会像in-flow元素那样影响周围的元素。

9.5 Floats中解释了这一点：

由于浮动不在流中，因此创建了未定位的块框在浮动箱垂直流动之前和之后，好像浮子没有存在。但是，旁边创建的当前和后续行框必要时缩短浮子以为边缘盒腾出空间浮动。

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling:after {
  content: 'Block sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}

<div class="float"></div>
<div class="block-sibling">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>

这个有问题的行为有一个例外：如果一个块元素建立一个Block Formatting Context（是一个BFC根），那么它将不会与浮点重叠：

表的边框，块级替换元素或正常流程中的元素，用于建立新的块格式上下文[...]不得与任何浮点数的边距框重叠阻止格式化上下文作为元素本身。

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling.bfc-root:after {
  content: 'BFC sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

<div class="float"></div>
<div class="block-sibling bfc-root">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>

例如，您可以建立一个overflow与visible不同的BFC，例如hidden

.div2 {
  overflow: hidden;
}

.div1 {
  height: 40px;
  width: 40px;
  background-color: red;
  display: block;
  float: left;
}
.div2 {
  height: 40px;
  width: 40px;
  background-color: green;
  display: block;
  overflow: hidden;
}
.div3 {
  height: 40px;
  width: 40px;
  background-color: yellow;
  display: block;
}

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

Answer 3

<html>
<head>
<style>
.div1{
    height:40px;
    width:40px;
    background-color:red;
    display:block;
    float:left;
}   
.div2{
    height:40px;
    width:40px;
    background-color:green;
    display:block;
    float:left;

}
.div3{
    height:40px;
    width:40px;
    background-color:yellow;
    display:block;
    float:left;
    clear: both; 
}
</style>
</head>

<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>

</html>

这会做你想要的，但是，在那段代码中有很多改进，以使它更简单，更干燥，这将是一个简短的答案，如果你想看到更好和更小的风格做同样的只是问，很乐意帮忙。

CSS float left问题

3 个答案: