CSS float属性意外行为 [英] CSS float property unexpected behavior
问题描述
所以我在检查css float属性，当我注意到一个奇怪的行为，我不知道它的原因。
这是 链接 代码和四个div的预览，前两个是左右浮动，第三个
我明白第三个div会和第二个div重叠，但是我不明白的是为什么第三个div被移走了，不应该隐藏在第二个div之后？
我知道问题可以使用clear属性修复第三个div，但是
<$ p $ p>
<！DOCTYPE HTML>
< html>
< head>
< meta charset =UTF-8>
<！ - [if lt IE 9]>
< script src =http://html5shiv.googlecode.com/svn/trunk/html5.js>< / script>
<！[endif] - >
< style>
aside，article，section，header，footer，nav {
display：block;
}
html，body {
margin：0;
padding：0;
}
html {
background：#ccc;
}
body {
width：600px;
background：#fff;
margin：2em auto 2em;
font：100％Arial，Helvetica，sans-serif;
}
div {
margin-bottom：1em;
margin-right：2em;
width：85px;
height：50px;
border：1px solid＃000;
padding：25px;
}
/ *在这里添加样式* /
.element1 {
background：rgb（26，78，175）
float：right;
color：white;
}
.element2 {
background：rgb（85，66，54）;
float：left;
color：white;
}
.element3 {
background：rgb（247,120,37）;
}
.element4 {
background：rgb（211，206，61）;
}
？
< / style>
< / head>
< body>
< div class =element1>元素1向右浮动< / div>
< div class =element2>元素2向左浮动< / div>
< div class =element3>元素3正常流程< / div>
< div class =element4>元素4正常流程< / div>
< / body>
< / html>
a href =http://www.w3.org/TR/1998/REC-CSS2-19980512/visuren.html#Floats =nofollow>此文档。
从文档引用：
由于浮动不在流程中，在浮动框之前和之后创建的非定位块框垂直流动，好像浮动框不存在一样。 但是，浮动边上创建的线框会缩短，为浮动框腾出空间。
$
因此，文档说的是，浮动元素 可以与添加到文档正常流程的元素重叠 ，但 em>不能与其内容重叠 ;换句话说，重叠元素的内容被限制在非重叠空间。
到目前为止，我已经抽象了浮动行为：
Element1：浮动元素
Element2：元素
1 - 绘制Element2的框模型。
2 - 绘制Element1的框模型及其内容。 / p>
3 - 如果Element2仍然有非重叠空格开始填充它的内容。
空间不能容纳整个内容，在Element2框模型下开始追加它们。
希望这会有帮助。
，感谢您向此问题提出问题的所有人+1。So i was examining the css float property when i noticed a strange behavior that i couldn't know its reason.
This is a link to the code and preview of four divs, first two are floated right and left, third and forth just a normal divs.
I do understand that the third div will get overlapped by the second one, however what i don't understand is why the content of the third div got shifted down, shouldn't it hide behind the second div?
P.S i know the problem can be fixed using the clear property for the third div, however i am more concerned about the reason behind this behavior.
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: #ccc;
}
body {
width: 600px;
background: #fff;
margin: 2em auto 2em;
font: 100% Arial, Helvetica, sans-serif;
}
div {
margin-bottom: 1em;
margin-right: 2em;
width: 85px;
height: 50px;
border: 1px solid #000;
padding: 25px;
}
/*add styles here*/
.element1 {
background: rgb(26, 78, 175);
float:right;
color:white;
}
.element2 {
background: rgb(85, 66, 54);
float:left;
color:white;
}
.element3 {
background: rgb(247,120,37);
}
.element4 {
background: rgb(211, 206, 61);
}
?
</style>
</head>
<body>
<div class="element1">Element 1 floated right</div>
<div class="element2">Element 2 floated left</div>
<div class="element3">Element 3 normal flow</div>
<div class="element4">Element 4 normal flow</div>
</body>
</html>
I've found the answer to my question within this document.
Quoting from the document:
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.
So basically what the document says is, floated elements can overlap the Box model of elements added to the document normal flow, however it can't overlap their content; in other words, content of an overlapped element is restricted to the non-overlapped space.
P.S. So far i have abstracted the floating behavior as such:
Element1: floated element
Element2: non-positioned element
1-Draw Element2's box model.
2-Draw the Element1's box model and its content.
3-If Element2 still has non-overlapped space start filling it with its content.
4-If the space couldn't hold the whole content, start appending them under Element2 box model.
Hope this would help.
Btw, thanks and +1 to everyone who contributed to the question.
这篇关于CSS float属性意外行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
