float的讲解:
初衷 | 例子 | 原理 |
实现图片文字的环绕效果 |
通过float,跳出了包裹自己的盒子,合盒子里面没有内容,那么height变为0;那么紧跟着本盒子的其他盒子就会往上移动,但是float后的元素并没有跳出文本流中,任然占有文本流的空间,其他盒子网上移动的过程中float后的内容就会去自动去拼接上移盒子中的内容,(但是两部分内容是独立的,可以通过margin: 0 50px 5px 0; 来设置间距)因此就会出现文字环绕的效果。 |
如何实现只浮动,盒子高度不为0呢?(清出浮动的影响)
p { clear: both; } ;在紧接着浮动的元素上加上该样式;
效果是:让装有浮动的盒子保持高度;
1、flaot以后,display的值变为:block;还会去除空格;
2、flaot和position:relative同时使用:
.t2{
background-color: red;
position: relative;
top: 50px;
right: -50px;
float: right;
}
效果为:先在原来的位置相对偏移以后,在执行float的浮动效果,都没有脱离标准流;
3、如果position:absolute,和float同时出现的话,那么float失效,因为position:absolute是将元素脱离了标准流;所以flaot不起作用。
补充:加了定位(position)以后,层高于标准流中的值;
原文地址:https://www.cnblogs.com/helei747123/p/9239941.html
时间: 2024-10-03 05:32:32