div+css浮動的解決方法-css教學-PHP中文網

首頁

web前端

css教學

div+css浮動的解決方法

高洛峰

Mar 31, 2017 am 11:15 AM

css 浮動

如何清楚浮动（一）

　　已知一个大的div容器，这个容器包含了两个子div容器，然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器)，清楚浮动的div容器设置css样式为clear:both，此时，大的div标签的内部(左右两边/*css5*/)浮动就清除了。

　　如果有一个大的div容器

，这个大的div包含了一个子div容器

，子div容器設定一個寬度、高度、背景色，不設定內、外邊距以及浮動，此時子div容器預設居左，這時子div居左是浮動(float)繼承瀏覽器的屬性，不具有佈局的功能。然後我們設定這個子div容器的浮動，讓它居左float:left；我發現設定了浮動居左float:left，子div容器產生了浮動，子div容器離大div容器頂部有一定距離。

<body>
        <div class="divcss5">
            <div class="clear"></div>
　　　　　　　　<!--<div class="clear eft"></div>
            　　　　　　　　<div class="clear ight"></div>-->
        </div> 
    </body>

登入後複製

浮動有margin屬性

　　然後我margin-top:10px, 子div容器在原有的基礎上向下移動了10px的距離，也就是說，浮動不會影響margin-top屬性應有的偏移量，同理也不會影響margin-left、margin-right、margin-bottom屬性應有的偏移量。

浮動沒有top，left，right，bottom屬性

　　然後，現在我刪掉margin-top:10px;，給子div容器設定top:10px，發現縱座標並沒有發生偏移，也就是說浮動並沒有top屬性。同理也就沒有left、right、bottom屬性。

　　那麼，在什麼情況下設定top、left、right、bottom的屬性才能對浮動運作呢？

浮動有top，left，right，bottom屬性(條件設定相對位置position)

　　於是，我給子div容器加了相對位置position:relative，接著設定top:10px，突然發現子div容器向下偏移了10px。

　　繼續在子div浮動的狀態，給它設定position:relative;，接著給它設定margin-left:10px;，看到子div容器的位置水平向右發生了10px的偏移量，同理margin-top、margin-right、margin-bottom都會改變。

　　也就是說，當給子div容器設定浮動float:left，接著設定margin-left會起作用，設定top是沒有作用。只有給子div容器設定相對位置position的時候，top才能在浮動的狀態下起作用，那麼是不是說left，top是在相對位置的時候，才能起作用呢？那現在我們就做一個實驗，我在子div容器裡把float:left;position:relative;都刪掉，不會有浮動，也不會有相對位置，然後寫上top:10px;left:10px;對應的css程式碼如下.clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left: 10px;};，結果是子div容器根本沒有在橫、縱軸移動過位置，所以事實證明left、top是在設定了相對位置position的時候才起作用。 margin就是不管你設定position與不設定position都會起作用。

　　繼續上面的float浮動，如果現在給float設定inherit;繼承瀏覽器的浮動屬性，此時我們看子div是不浮動的，預設居左。同樣的給子div設定浮動樣式 none initial也不會有浮動作用。只有給子div容器設定了left和right的浮動，子div容器才會出現浮動狀態。

如何清楚浮動（二）

　　下面，我們用一種其他的方法來清除浮動，HTML程式碼還是以上的程式碼，大容器的div的css程式碼：.divcss5{padding:10px 0;width: 100%; left: 50%;right: 50%;background: #007CB5;}，子div容器的css代碼：.clear{width: 200px;background: #f2e ;color:#030617;height: 20px;float:left;}，此時看到的是浮動的效果，子div容器浮在大容器上面，同樣的原理，我還是用清除浮動clear:both；我們可以用css偽元素:after，下面就是一個很簡單的css程式碼，寫給父容器css偽類別，程式碼：.divcss5:after{content: "1";clear : both;display: block;}，此時，我們看到的是，清除了大容器的浮動，並且在瀏覽器上能看到子div容器被包含在了大div容器內部。在瀏覽器上查看元素，可以看到after包含在了父容器內，所以，after相當於在給父容器內部加一個清楚浮動的div，只是少了一個div層，這個層被.divcss5:after實現了。

以上是div+css浮動的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1663

CakePHP 教程

1420

Laravel 教程

1315

PHP教程

1266

C# 教程

1239

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。