css之float飘起来

最新推荐文章于 2022-12-21 17:31:32 发布

stalwartwill

最新推荐文章于 2022-12-21 17:31:32 发布

阅读量2.1k

点赞数

分类专栏： CSS — 基础文章标签： css float 布局 css

本文链接：https://blog.csdn.net/stalwartwill/article/details/10217811

版权

CSS — 基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css中的float属性可以使元素飘起来，在飘起来的同时，肯定也就不占用地面的空间了。只是飘起来的元素都飘在了上空相同的高度（即同一个平面内），所以飘起来的元素之间会相互挤兑。并且由于不占用空间的关系，飘起来的元素可能会遮住下面布局的其它元素。

如下面这一段代码，两个飘起来的<p>元素将飘到ID为coveredArea的<DIV>上空，而ID为floatingRoom的<DIV>所占的区域并不包括两个飘起来的<p>：

<div id="floatingRoom" style="border:solid 1px blue;">
    	<p>infomation to cppy</p>
        <p style="float:left; background-color:#999">
        	floating left;
        </p>
        <p style="float:right">
        	floating right;
        </p>
    </div>
    <div id="coveredArea" style="border:solid 1px green;">
    	oh, my god, you are floating over my head.
    </div>

float与position:absolute的区别：

多个float元素之间是会互斥的占用布局区域，而absolute布局的元素不会，他们的呈现位置只和其第一个非static布局的祖先元素的位置以及自身的相对定位坐标有关