浮动元素脱离了普通文档流，不占据空间，那为什么div #three的内容会在div #one 后显示， 10
难道不应被遮挡吗？<html><head><title>clear</title><styletype="text/css">#father{border:1pxsoli...
难道不应被遮挡吗？<html> <head> <title>clear</title> <style type="text/css"> #father{border:1px solid black;height:30%;} #one{float:left;width:25%;background:red;} #two{float:right;width:45%;background:blue;} #three{border:1px solid green;} </style> </head><body> <div id="father"> <div id="one">1</div> <div id="two">2</div> <div id="three">jiangxijfdsafj</div> </div></body></html>
展开
展开全部
浮动对后续元素造成影响。
你的#one和#two分别是左右浮动，造成中间是没东西的，根据浮动对后续元素的影响，#three上移填入了空白部分。
解决方法是，在浮动的最后一个元素（这次的代码中就是#two这个div后面）后面，添加一个div，样式为clear:both;来清除浮动的影响。
具体你可以百度如何清除浮动的影响，有多种办法解决
你的#one和#two分别是左右浮动，造成中间是没东西的，根据浮动对后续元素的影响，#three上移填入了空白部分。
解决方法是，在浮动的最后一个元素（这次的代码中就是#two这个div后面）后面，添加一个div，样式为clear:both;来清除浮动的影响。
具体你可以百度如何清除浮动的影响，有多种办法解决
追问
我的问题不是如何清除浮动，那个浮动元素不是会遮挡非浮动元素吗？普通文档流中的元素不是应该就当浮动元素不存在一样，挨着父元素框显示的吗？
追答
这是我写的一个效果。四个红色的div全是左浮动，然后跟着一个正常的黑色div。可以看到黑色div是跟着红色后面，而不是被覆盖。
以下是我直接复制网上搜到的内容：
一个元素设置了浮动样式后，会影响它的兄弟元素，至于如何影响，要看它的兄弟元素是块级元素还是内联元素。如果兄弟元素是块级元素，会无视这个浮动元素，即兄弟元素和浮动元素共处同行，浮动元素会覆盖兄弟元素。除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行；如果兄弟元素是内联元素，则会尽可能围绕浮动元素。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
