關於css中浮動float的最好理解-css教學-PHP中文網

首頁

web前端

css教學

關於css中浮動float的最好理解

高洛峰

Feb 22, 2017 pm 01:09 PM

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<div style="border:3px solid silver; width:300px;">
    <div id="container" style="background-color: blue;">
        <div style="float:left; background-color: green;">above</div>
        <div id="DIV" style="margin:30px 0; background-color:gold;">content</div>
        <div style="float:right; background-color: green;">below</div>
    </div>
</div>
<hr>
<hr>
<div style="border:3px solid silver; width:300px;">
    <div id="container" style="background-color: blue;">
        <div style="position:absolute; background-color: green;">above</div>
        <div id="DIV" style="margin:30px 0; background-color:gold;">content</div>
        <div style="position:absolute; background-color: green;">below</div>
    </div>
</div>
<hr>
<hr>
<div style="border:3px solid silver; width:300px;">
    <div id="DIV1" style="margin-bottom:50px; background-color:gold;">above</div>
    <div id="Float" style="float:left; background-color: green; width:100%;">Float</div>
    <div id="DIV2" style="margin-top:50px; background-color:gold;">below</div>
</div>

</body>

</html>

效果如下：

關於css中浮動float的最好理解

更多關於css中浮動float的最好理解相關文章請關注PHP中文網！

陳述

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

捍衛三元聲明Apr 22, 2025 am 11:25 AM

幾個月前，我正在使用黑客新聞（就像一個人一樣），並且遇到了一篇（現已刪除的）文章，內容涉及不使用if語句。如果您是這個想法的新手（就像我

使用網絡語音API進行多語言翻譯Apr 22, 2025 am 11:23 AM

自科幻小說以來，我們就幻想著與我們交談的機器。今天這很普遍。即便如此，製造的技術

JetPack Gutenberg塊Apr 22, 2025 am 11:20 AM

我記得當古騰堡被釋放到核心時，因為那天我在WordCamp我們。現在已經過去了幾個月，所以我想我們越來越多的人

在VUE中創建可重複使用的分頁組件Apr 22, 2025 am 11:17 AM

大多數Web應用程序背後的想法是從數據庫中獲取數據，並以最佳方式將其呈現給用戶。當我們處理數據時

使用'盒子陰影”和剪輯路徑一起Apr 22, 2025 am 11:13 AM

讓我們在一個情況下做一些似乎有意義的事情的情況下逐步進行一些逐步，但是您仍然可以用CSS欺騙來完成它。在這個

關於MailTo：鏈接Apr 22, 2025 am 11:04 AM

您可以製作花園品種錨點（）打開一封新電子郵件。讓我們在此功能上進行一些旅程。它非常易於使用，但是

它非常酷Apr 22, 2025 am 11:03 AM

這裡的小供認：當我第一次看到Netlify CMS一目了然時，我想：很酷，也許我有一天會在我探索一個新項目的CMS時嘗試一下。然後

用珀西測試視覺回歸Apr 22, 2025 am 11:02 AM

這是測試的艱鉅任務

See all articles

熱AI工具

熱工具

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），

SublimeText3 Mac版

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

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。