關於css中float的理解對CSS中的Position、Float屬性的一些深刻探討經驗分享：CSS浮動(float,clear)通俗講解

時間 2019-12-08

標籤關於 css float 理解 position 屬性一些深刻探討經驗分享浮動 clear 通俗講解欄目 CSS 简体版

原文原文鏈接

感受css裏的float是個很是神奇的東西，神奇之處在於，你知道它是什麼意思，可是用的時候老是不知道怎麼實現效果。又或者它會很容易地影響到別的元素和屬性。因此今天打算嘗試一下float的各類設置，看看效果。在這篇博客裏作個總結。css

1. 設置float後對後面元素的影響html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            border:1px solid red;
            width:50px;
            height:50px;
            float: left;
        }
        .div2{
            background: green;
            widows: 30px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

效果：post

也就是說前面浮動元素會位於後續的非浮動元素的上方，確實是脫離了文檔流。這大概就是「浮動能夠理解爲讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。」的意思吧。url

而另外一方面，若是把兩個元素調換次序，則效果爲：spa

這時候div1是浮動元素，會被上面的元素頂下來。即便改變div2的寬度，也依然如此。3d

可是這時候若是把div2設置爲position:absolute的話，div1就會浮動上去，說明position也是脫離標準流的，互不干涉。code

而設置了position：absolute屬性的元素會覆蓋接下來的浮動元素。htm

2. float和position的相互影響 blog

若是在float上設置position：absolute的話，會覆蓋float的屬性。就不是浮動了。float失效文檔

在float上設置position：relative的話，若是設置left/top/right/bottom等屬性，則元素會先浮動到相應位置，而後再根據top/left/bottom/right所設置的距離發生偏移

在float上設置margin屬性也是有效的。

參考：

對CSS中的Position、Float屬性的一些深刻探討

經驗分享：CSS浮動(float,clear)通俗講解

相關文章

相關標籤/搜索

我理解中的

WebService中的註解

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<