Question

通过将right-column的宽度设置为低于左浮动元素left-column，而不是环绕它，即使有足够的空间。为什么会这样？根据我的理解，如果有足够的空间，右列应该在左浮动元素周围回流？

＆＃13;

* {
	margin: 0;
	padding: 0;
}
.container {
	width: 400px;
	overflow: hidden;
	background: lightgreen;
}
.left-column {
	width: 200px;
	float: left;
	background: red;
}
.right-column {
	width: 200px;
	background: cyan;
}

＆＃13;

<div class='container'>
	<div class='left-column'>I am the left column</div>
	<div class='right-column'>I am the right column</div>
</div>

＆＃13;

为什么设置right-column向右浮动或设置margin-left: 200px会阻止掉线？

＆＃13;

* {
	margin: 0;
	padding: 0;
}
.container {
	width: 400px;
	overflow: hidden;
	background: lightgreen;
}
.left-column {
	width: 200px;
	float: left;
	background: red;
}
.right-column {
	width: 200px;
	float: right;
	background: cyan;
}

＆＃13;

<div class='container'>
		<div class='left-column'>I am the left column</div>
		<div class='right-column'>I am the right column</div>
	</div>

＆＃13;

Answer 1

浮动元素时，将其从文档的正常流中移除，然后文本和内联元素将环绕它 - 而不是其他块级元素。浮动元素和块级元素现在重叠，只有包装块元素中的文本/内联内容将环绕浮动元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/float

浮点CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。

在您的代码中，块级元素.right-column不会围绕左列 - 但其中的文本/内容将会被覆盖，除非您给出了相同宽度的元素。左边和右边的div现在重叠，但由于它们设置为相同的宽度，它们彼此重叠，右列中的文字无处可去，但在左列之下。该文本在技术上围绕左列包装，但由于宽度限制，它无处可包裹但在左列下方。您可以通过稍微扩展.right-column的宽度来看到这一点。您会看到.right-column现在有足够的空间让其中一些文本内容显示在左侧列旁边并换行。

＆＃13;

* {
	margin: 0;
	padding: 0;
}
.container {
	width: 400px;
	overflow: hidden;
	background: lightgreen;
}
.left-column {
	width: 200px;
	float: left;
	background: red;
}
.right-column {
	width: 300px;
	background: cyan;
}

＆＃13;

<div class='container'>
  <div class='left-column'>I am the left column</div>
  <div class='right-column'>I am the right column</div>
</div>

＆＃13;

Answer 2

修改

为什么浮动无法使用右div

简答：


您还没有为.right-column撰写浮动位置。

Long Ans

初始div是block标签元素。默认direction: ltr;。如果仅为width和.left-column设置.right-column，则会默认设置left方向。即使您右侧有足够的空间，float: left;的第一个代码段仅设置为.left-column .right-colun，它也不会改变.right-column方向。这是因为您的第一个代码段CSS没有设置正确的方向。您应该更改每列的方向。

float direction属性不会更改实际box-modle属性，而是更改每个元素的ltr位置。


注意：没有浮动元素框模型由父元素方向属性控制。

方向属性默认值由浏览器引擎ltr为该语言设置。当您尝试开发希伯来语和阿拉伯语语言网站时，您应该从左到右更改正文方向，这意味着rtl到(float: right;)并浮动应该从每个元素的右边.container开始。

让我们使用direction属性如何控制方向属性控制UN浮动元素


默认如果ltr方向为float且没有.left-column属性.right-column和* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{ margin: 0; padding: 0; } .container { direction: ltr; padding: 5px; width: 400px; overflow: hidden; background: lightgreen; } .left-column { width: 50%; /*float: left; */ /* No float */ background: red; } .right-column { width: 50%; /*float: left;*/ /* No float*/ background: cyan; }。

＆＃13;
＆＃13;
<div class='container'> <div class='left-column'>I am the left column</div> <div class='right-column'>I am the right column</div> </div>
＆＃13;
.container
＆＃13;
＆＃13;
＆＃13;


默认 ltr方向为float: left;，.left-column为* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{ margin: 0; padding: 0; } .container { direction: ltr; padding: 5px; width: 400px; overflow: hidden; background: lightgreen; } .left-column { width: 50%; float: left; /* float left */ background: red; } .right-column { width: 50%; /*float: left;*/ /* No float*/ background: cyan; }。

＆＃13;
＆＃13;
<div class='container'> <div class='left-column'>I am the left column</div> <div class='right-column'>I am the right column</div> </div>
＆＃13;
.container
＆＃13;
＆＃13;
＆＃13;

注意：无变化


默认 ltr方向为float: left;，.left-column和.right-column为* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{ margin: 0; padding: 0; } .container { direction: ltr; padding: 5px; width: 400px; overflow: hidden; background: lightgreen; } .left-column { width: 50%; float: left; /* No float */ background: red; } .right-column { width: 50%; float: left; /* No float*/ background: cyan; }。

＆＃13;
＆＃13;
<div class='container'> <div class='left-column'>I am the left column</div> <div class='right-column'>I am the right column</div> </div>
＆＃13;
.container
＆＃13;
＆＃13;
＆＃13;

注意：现在它改变了盒子模型的位置。


自定义如果rtl方向为float且没有.left-column属性.right-column和* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{ margin: 0; padding: 0; } .container { direction: rtl; padding: 5px; width: 400px; overflow: hidden; background: lightgreen; } .left-column { width: 50%; /*float: left; */ /* No float */ background: red; } .right-column { width: 50%; /*float: left;*/ /* No float*/ background: cyan; }。

＆＃13;
＆＃13;
<div class='container'> <div class='left-column'>I am the left column</div> <div class='right-column'>I am the right column</div> </div>
＆＃13;
b=Integer.parseInt(t1.getText()); // second number
＆＃13;
＆＃13;
＆＃13;


你可以这样玩。

只有方向属性控制的UN浮动元素。

设置宽度的元素不包围浮动元素和丢弃

2 个答案: