了解CSS浮动属性

我试图学习CSS，但我必须错过一些东西。了解CSS浮动属性

在下面的CSS代码中，divTwo的背景似乎已经落后于divOne。但divTwo的内容似乎已经落后了 - 为什么div的背景似乎独立于内容而移动？

#divOne { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    margin:5px; 
 
    float:left 
 
} 
 
#divTwo { 
 
    width: 300px; 
 
    height: 100px; 
 
    padding:5px; 
 
    background-color: green; 
 
}

<div id="divOne">Div01</div> 
 
<div id="divTwo">Div02</div>

结果在Chrome

来源

2016-10-15 Werner

当我开始使用CSS我也糊涂了什么浮球究竟做......你应该看看[这里]（https://www.youtube.com/watch?v=xara4Z1b18I）视频，它真的睁开了我的眼睛。 – Kevin

如果你想让背景颜色出现在divTwo上，你也可以在'＃divTwo' CSS上添加'clear：both;' –

这是后话，在短短简单的HTML相当频繁会晤。在您当前的代码中，您没有使用任何containers,wrappers或rows。这导致元素重叠，如果你想让它们不重叠，你应该给它们一些定位或者填充。在提供的小提琴中，我为divTwo添加了一个padding 50 px，以增加它的盒子显示效果。

其主要思想是，你从不开始简单地编写代码，但仔细想想每个元素在你的网页上的位置。一个好的做法是学习如何“堆叠”元素（这就是我所说的，这个术语可能不正确）。另一件事是，有一些特定的前端框架可以通过示例教你如何做到这一点。

引导，Zurb基金会（但引导......我不知道有多少人使用Zurb）

这里的JS提琴，看看究竟股利已经改变：JS Fiddle

来源

2016-10-16 00:16:21 ZombieChowder

从Mozilla provided Float Documentation

如何浮标定位

如上所述，当一个元素被浮动时，其被取出文档的正常流程的 。它向左或向右移动，直到它接触到其包含的框或其他浮动元素的边缘，即。

所以我想象当你为divOne声明浮动而不是divTwo时，那么divTwo跟随与divOne相同位置的文档的正常流动。

您可能还会发现Documentation for CSS Display有用。

如果你想要这些行内，但不想申报浮子divTwo你可以使用：

#divOne { width: 300px; height: 100px; background-color: yellow; float:inline-start; } #divTwo { width: 300px; height: 100px; padding:5px; background-color: green;

}

来源

2016-10-16 00:23:58 jpat827

像@ZobmbieChowder说，CSS的float属性的逻辑是，你有一个巨大的盒子，里面有两个小盒子，现在你想要一个盒子放在左边，另一个放在右边。如果你没有第一个巨大的盒子，编译器就没有得到人类的逻辑，哪一个应该是左边或右边。对于机器而言，首先你需要“定义”一个容器，然后向左或向右说明它的元素位置。

来源

2016-10-16 00:30:37

divTwo的内容不是独立移动的。内容是文本，因此它在线框中呈现。

现在，虽然未完成，未清理的块忽略在它们之前的浮动元素的存在，但它们包含的线框却没有。线框将避免浮动元素，并且可以沿着浮动元素移动，或者在浮动元素下方没有空间的情况下移动。

在你的例子中，没有空间，所以文本已经在浮动元素下面了。但是既然你已经为divTwo设置了一个固定的高度，那么下面的divTwo中没有足够的空间用于线框。所以文本内容溢出 divTwo，因此文本显示时没有divTwo的背景。

来源

2016-10-16 00:33:21 Alohci

替代@ jpat827答案会是任一组DIV二的clear属性left或DIV一个后添加一个空的DIV和设置它的clear属性left。什么

clear属性（如果没有空间留给未展开的元素）会阻止未展开的元素进入浮动元素之下。

当你清除div 2到左边时，它真正做的是它将div div放置在浮动元素下面。

比方说，第一个浮动到右侧，那么你将不得不清除第二个右边，为了使它低于第一个div。

如果有三个div，其中两个浮动到左侧和右侧，那么第三个未展开的div的clear属性必须设置为both，以便它可以清除以任一方向浮动的过去元素。

我希望这是有帮助的。

谢谢

来源

2016-10-16 01:16:13

了解CSS浮动属性

回答

相关问题