float大多数初学者都误解了该属性。好吧，到底是做float什么的？最初，float引入了该属性，以使文字围绕图像浮动left或浮动right。这是 @Madara Uchicha 的另一种解释。因此，使用该float属性并排放置盒子是否错误？答案是否定的。如果使用该float属性来并排设置框，则没有问题。
浮动元素inline或block水平元素将使元素的行为类似于inline-block元素。
演示版如果浮动元素left或right，则width除非width明确定义，否则该元素的仅限于其持有的内容……
你不能有float一个元素center。这是我在初学者中经常遇到的最大问题，这不是该float属性的有效值。float通常用于float/在最左侧或最右侧移动内容。只有4有效值float财产即left，right，none（默认）和inherit。
当父元素包含浮动子元素时，它会折叠，为了防止这种情况，我们使用clear: both;属性来清除两侧的浮动元素，这将防止父元素崩溃。有关更多信息，您可以在这里参考我的另一个答案。
（重要）想一想，我们拥有一堆各种元素。当我们使用float: left;或float: right;元素在堆栈上方移动一个。因此，普通文档流中的元素将隐藏在浮动元素的后面，因为它位于普通浮动元素上方的堆栈级别上。（请不要将此与这z-index完全不同。）
以一个案例为例来说明CSS浮点的工作原理，假设我们需要一个简单的2列布局，其中包含页眉，页脚和2列，因此
在上面的例子中，我们将浮动只有红色箱子，要么你可以float同时向left，或者你可以float上left，另一个right为好，取决于布局，如果是3列，你可能float2列left，其中另一一个right取决于，尽管在此示例中，我们具有简化的2列布局，所以float个left与另一个相对应right。
用于创建布局的标记和样式在下面进一步说明…
<div > <header>Header</header> <div > <div > This<br /> is<br /> just<br /> a<br /> left<br /> floated<br /> column<br /> </div> <div > This<br /> is<br /> just<br /> a<br /> right<br /> floated<br /> column<br /> </div> </div> <footer>Footer</footer></div>* { -moz-box-sizing: border-box; -webkkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}.main_wrap { margin: 20px; border: 3px solid black; width: 520px;}header, footer { height: 50px; border: 3px solid silver; text-align: center; line-height: 50px;}.wrapper { border: 3px solid green;}.floated_left { float: left; width: 200px; border: 3px solid red;}.floated_right { float: right; width: 300px; border: 3px solid red;}.clear:after { clear: both; content: ""; display: table;}让我们逐步进行布局，看看float如何工作。
首先，我们使用的主要的包装元素，你可以认为它就是你的口，然后我们使用header和分配height的50px所以没有什么
花哨的存在。它只是一个普通的非浮动块级元素，除非它是浮动的或我们分配给它，否则它将占用100%水平空间inline- block。
第一个有效的值
float是
left如此在我们的例子中，我们使用
float: left;了
.floated_left，因此，我们打算在块浮动到left我们的容器元素。
列浮动到左侧
是的，如果您看到
.wrapper折叠的父元素，则看到的带有绿色边框的那个元素没有展开，但这应该对吗？稍后，现在将回到列left。
进入第二列，让它float进入right
另一列浮动在右侧
在这里，我们有一个300px宽列，我们
float到
right，当它浮动到时，它将位于第一列旁边left，并且由于它浮动到
left，因此它为创造了一个空槽
right，并且由于上有足够的空间
right，right浮动元素完美地坐在旁边left。
尽管如此，父元素仍然折叠，现在让我们修复它。有很多方法可以防止父元素折叠。
添加一个空的块级元素，并
clear: both;在包含浮动元素的父元素结束之前使用，现在这是对clear浮动元素的廉价解决方案，它将为您完成工作，但是，我建议您不要使用它。
<div ></div>在
.wrapper
div结尾之前添加，例如
<div > <!-- Floated columns --> <div ></div></div>
好了，它修复得很好，不再有折叠的父级，但是它为DOM 添加了不必要的标记，因此有人建议
overflow: hidden;在持有浮动子级元素的父级元素上使用，该元素按预期工作。
使用
overflow: hidden;上
.wrapper
.wrapper { border: 3px solid green; overflow: hidden;}这每次都为我们节省了一个元素，clear float但是当我以此测试各种情况时，它在使用box- shadow子元素的一个特定案例中失败了。
演示（无法看到所有四个侧面的阴影，
overflow: hidden;导致此问题）
所以现在怎么办？保存一个元素，不行
overflow: hidden;，进行明确的修复，在CSS中使用以下代码段，就像
overflow:hidden;对父元素一样，class对父元素进行以下调用以自清除。
.clear:after { clear: both; content: ""; display: table;}<div > <!-- Floated Elements --></div>在这里，阴影可以按预期工作，并且可以自动清除防止崩溃的父元素。
最后，我们clear在浮动元素之后使用页脚。
float: none;无论如何，都是使用when ，因为它是默认值，所以可以用来声明
float: none;？
好吧，这取决于是否要进行响应式设计，当您希望浮动元素以某个分辨率在另一个元素下方进行渲染时，会多次使用此值。因为那里的
float: none;财产起着重要的作用。
实际例子中很少float有有用的例子。
我们已经看到的第一个示例是创建一个或多个列布局。img在内部使用float p可以使我们的内容四处流通。演示（无浮动img）
演示2（img浮动到left）
使用float用于创建水平菜单- 演示还是浮动第二个元素，还是使用
margin最后但并非最不重要的一点，我想解释一下这种特殊情况，其中您
float仅将元素分配给，
left而您没有float其他元素，那么会发生什么呢？
假设如果我们
float: right;从中移除
.floated_right class，则div它将呈现为极端，left因为它没有浮动。
所以在这种情况下，要么你可以
float在给
left为好
要么
您可以使用
margin-left它将等于左浮动列的大小，即
200pxwidth。
