浮动和绝对定位对布局的影响
程序员文章站
2022-04-24 22:31:59
...
http://blog.csdn.net/cxl444905143/article/details/17361045
上面解释了浮动和绝对定位的区别,绝对定位是完完全全脱离文档流,而浮动定位如果里面有文字,即使是子元素里面有文字,那么文字依然会环绕该浮动元素。
.son{
float: left;
width: 100px;
height: 100px;
border:1px solid red;
}
.child{
width: 200px;
height: 150px;
border: 1px solid blue;
}
.inner{
width: 50px;
height: 50px;
border:1px solid yellow;
}
.span{
border: 1px solid green;
width: 30px;
height: 30px;
}
<div class="son"></div>
<div class="child"><div class="inner">123456789</div></div>
效果图:
而绝对定位不会产生这种情况。
虽然浮动和绝对定位都是脱离文本流,但是绝对定位是彻底脱离的,而且它不会影响其他元素的布局。而浮动是会影响的,会导致文本环绕它。
上一篇: 首发4299元!realme王伟谈首款笔记本:可以闭着眼睛买
下一篇: ReactDom
推荐阅读
-
右浮动对布局的影响
-
绝对定位和浮动的问题,求大神帮忙解决_html/css_WEB-ITnose
-
CSS布局之浮动(float)和定位(position)属性的区别
-
绝对定位对元素宽度的影响
-
关于浮动和绝对定位的区别,到底是怎么回事?_html/css_WEB-ITnose
-
块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解_html/css_WEB-ITnose
-
绝对定位对margin外边距的影响_html/css_WEB-ITnose
-
内嵌盒子定位和居中问题,在缩放浏览器情况下,不会影响盒子的布局_html/css_WEB-ITnose
-
绝对定位对margin外边距的影响_html/css_WEB-ITnose
-
内嵌盒子定位和居中问题,在缩放浏览器情况下,不会影响盒子的布局_html/css_WEB-ITnose