5.浮动

最新推荐文章于 2025-06-20 22:38:38 发布

原创最新推荐文章于 2025-06-20 22:38:38 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

======= Web ======= 同时被 2 个专栏收录

55 篇文章

订阅专栏

html + css + js

32 篇文章

订阅专栏

浮动

　　浮动是css中很重要的概念，浮动涉及左浮动、右浮动、清除浮动。

　　当某个div发生浮动操作时，意味着它脱离了标准流。而其它的div正常显示。

例如：发生右浮动的时候，该div向右浮动，直到碰到最近的(父元素)一个边界便停止。

浮动的必要性：因为默认情况下，div是纵向排列的，如果希望div1向右边显示，或者依次横排显示..可以使用浮动来实现。

实例代码：

html：

<body>
    <div class="div4">
       <div class="div3" id="div2">div1</div>
       <div class="div1" id="div2">div2</div>
       <div class="div1" id="div2">div3</div>
       <div class="div1" id="div2">div3</div>
    </div>
</body>

css：

.div1
{
    border: 1px solid blue;
    width: 150px;
    height: 100px;
    background-color: pink;
    margin-top: 5px;
    margin-left: 5px;}
#div2
{
    float: left;}    
    .div3
{
    border: 1px solid blue;
    width: 150px;
    height: 150px;
    background-color: gray;
    margin-top: 5px;
    margin-left: 5px;}
    .div4
{
    border: 1px solid blue;
    width: 450px;
    height: 400px;
    background-color: green;
    margin-top: 5px;
    margin-left: 5px;}

//看了这个例子，应该就懂浮动的一些特点了。