2 aver86 aver86 于 2014.11.30 13:01 提问

与position修改为float的元素相邻的内联元素会如何排版?

#box1{
background-color:red;
width:200px;
height:100px;
float:left;
}
#box2{
background-color:blue;
width:200px;
height:100px;
}
#box3{
background-color:yellow;
width:200px;
height:100px;
}
div id="box1" /div img src="test.jpg" width="200px" height="100px"/
div id="box2" /div
div id="box3" /div
为了代码的正常显示,所有的尖括号都被我去掉了。我的问题是:
第一个div因为float属性脱离了文档流,那么按照文档流的概念,图片应该从第一行第一列开始排版,可是为什么在实际中图片不会被box1挡住呢?

3个回答

xuzuning
xuzuning   Ds   Rxr 2014.11.30 15:14
已采纳

box1 虽然脱离了文档流,但并没有释放他所占据的空间
你把 < img src="test.jpg" width="200px" height="100px"/> 调到 box1 前面就可看到这一点

你若像我这样处理 html 标记(在 < 后面加个空格)测试代码时就方便了许多了

aver86
aver86 感谢亲的回答~尽管还是想不大通哦 ,但是没关系,我可以慢慢想啦~ 还有亲给的方法很好用,谢谢!
3 年多之前 回复
showbo
showbo   Ds   Rxr 2014.11.30 20:00

要想覆盖,position改为absolute或者fixed定位,不会占用文档位置,float是浮动布局,可以left/right

http://www.divcss5.com/rumen/r93.shtml

m949181240
m949181240   2014.12.03 13:33

float只是在文档流中左或右浮动,box1还是在文档流中的,只是位置变了。
position:absolute/fixed,才是脱离文档流。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
float对内联元素和块元素的影响
原文链接:https://my.oschina.net/jing31/blog/6601       float属性还没有彻底了解,因为遇到了float之后会导致width自适应最小化的问题,所以找到这篇文章。 一直以为float属性不会对div的宽度或高度有什么影响.但是,这两天我发 现在float对div宽度的影响是显著的. 首先div的默认宽度是widt
块级元素与内联元素(行内元素)及浮动知识总结
块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的div、p、ul默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能,设置float后,就不用再display:block;了,浮动后自动就是块元素
CSS排版之对float排版和position的absolute的理解(周三贴)
CSS排版之对float排版和position的absolute的理解
CSS网页布局心得(样式优先级,块级元素,内联元素,display,position,float)
文章涉及的知识点:CSS,样式优先级,块级元素,内联元素,display,position,float
关于position:absolute和float之脱离文档流
position:absolute和float浮动都会以某种方式将元素从文档的正常流中删除。但其还是有点不同:float元素还是会影响布局,它对文档的其余部分还是会有影响;而绝对定位的元素会从文档流中完全删除,然后相对于其包含块定位。 直观的感受就是,absolute元素会遮挡其他元素,而float不会。 一个元素浮动时,其他元素会“环绕”该元素。任何元素都可以
html——float与position的兼容性探究
Float属性 float的属性值有none、left、right,有几个要点: 只有横向浮动,并没有纵向浮动。当元素应用了float属性后,将会脱离普通流,其容器(父)元素将得不到脱离普通流的子元素高度。会将元素的display属性变更为block。浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片),与应用了position的元素相比浮动元素并不会遮盖后一个元素。浮动元素
【初级-个人理解】float是否脱离普通流?是否占据空间?以及浮动对内联和块元素的影响。
注:本文纯属个人理解。         First: “文档流”是,在css里面的定义是  normal flow(普通流)          链接(英文):https://www.w3.org/TR/CSS21/visuren.html          链接(中文引用博客链接):http://blog.csdn.net/winnersong/article/details/1379324
为什么在元素设置float之后就可以改变宽和高了呢?
今天一个朋友说遇到一个面试题,无论是何种元素(inline,inline-block,block)在设置float之后,都可以改变他的宽度和高度了。做前端这么久我竟然都没思考过这个问题,罪过罪过啊。下面一个小小例子,测试一下。 效果图: 现在这种情况下 ,如果想让他们看起来好看点只能设置padding来扩充,因为span是行内元素,无法设置宽度和高度,全靠里面的内容撑起来。
内联元素(inline)和块级元素(block)
常见的内联元素(inline)和块级元素(block)内联元素(inline):a – 锚点 abbr – 缩写 acronym – 首字 b – 粗体(不推荐) big – 大字体 br – 换行 cite – 引用 code – 计算机代码(在引用源码的时候需要) dfn – 定义字段 em – 强调 font – 字体设定(不推荐) i – 斜体 img – 图片 i
float和position:absolute脱离文本流的区别
文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行; CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。   需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。   而对于使用absolute p