css - 07浮動佈局
阿新 • • 發佈：2022-04-21
<!DOCTYPE html> <html lang="en"> <head> <!--<link rel="stylesheet" href="float.css" type="text/css">--> <meta charset="UTF-8"> <title>浮動佈局</title> <style> /*使用浮動可以控制相鄰元素間的排列關係。*/ /*沒有設定浮動的塊元素是獨佔一行的。*/ /*浮動是對後面元素的影響，第二個元素設定浮動對第一個元素沒有影響。*/ /*如果只給第一個元素設定浮動(丟失空間位)，第二個元素不設定，後面的元素會佔用第一個元素空間。兩個元素都設定浮動後，會並排顯示。*/ /*不希望元素受浮動元素影響時，可以清除浮動，以感知到上面元素所佔的空間位。*/ /*浮動元素邊界不能超過父元素的padding。*/ /*元素浮動後會變為塊元素包括行元素如span，所以浮動後的元素可以設定寬高。行元素不能設定寬高*/ /*1.使用clearfix清除浮動*/ /*.clearfix {*/ /* clear: both;*/ /* height: 0;*/ /* !*顯示根據浮動元素高度自動撐開父元素的新添子元素輪廓*!*/ /* border: solid 3px blue;*/ /*}*/ /*main {*/ /* border: solid 3px black;*/ /* !*height: 220px;*!*/ /* width: 620px;*/ /* margin: 0 auto;*/ /* padding: 20px;*/ /*}*/ /*div {*/ /*width: 300px;*/ /* height: 300px;*/ /* box-sizing: border-box;*/ /*}*/ /*div:nth-of-type(1) {*/ /* border: solid 3px red;*/ /* float: left;*/ /*}*/ /*div:nth-of-type(2) {*/ /* border: solid 3px green;*/ /* float: right;*/ /*}*/ /*2.清除浮動對元素的影響*/ /*div {*/ /* width: 200px;*/ /* height: 200px;*/ /*}*/ /*div.red {*/ /* border: solid 3px red;*/ /* float: left;*/ /*}*/ /*div.green {*/ /* border: solid 3px green;*/ /* float: right;*/ /*}*/ /*div.blue {*/ /* border: solid 3px blue;*/ /* background: blue;*/ /* clear: both;*/ /*}*/ /*3.通過AFTER偽元素清除浮動影響*/ /*main {*/ /* border: solid 3px black;*/ /* !*height: 220px;*!*/ /* width: 620px;*/ /* margin: 0 auto;*/ /* padding: 20px;*/ /*}*/ /*!*設定after偽類，就相當於自動追加一個空div,相比設定clearfix類的好處是不需要手動在浮動元素下新增空元素*!*/ /*main::after {*/ /* content: "";*/ /* clear: both;*/ /* display: block;*/ /* height: 0;*/ /* border: solid 3px blue;*/ /*}*/ /*div {*/ /* width: 300px;*/ /* height: 300px;*/ /* box-sizing: border-box;*/ /*}*/ /*div:nth-of-type(1) {*/ /* border: solid 3px red;*/ /* float: left;*/ /*}*/ /*div:nth-of-type(2) {*/ /* border: solid 3px green;*/ /* float: right;*/ /*}*/ /*4.OVERFLOW觸發BFC清除浮動影響*/ /*main {*/ /* border: solid 3px black;*/ /* !*height: 220px;*!*/ /* width: 620px;*/ /* margin: 0 auto;*/ /* padding: 20px;*/ /* !*觸發BFC，父級元素不會與浮動子元素髮生疊加，父元素的高度計算會包括浮動子元素的高度。*/ /* 觸發方式: overflow:hidden/scroll/auto*/ /* *!*/ /* overflow: hidden;*/ /*}*/ /*div {*/ /* width: 300px;*/ /* height: 300px;*/ /* box-sizing: border-box;*/ /*}*/ /*div:nth-of-type(1) {*/ /* border: solid 3px red;*/ /* float: left;*/ /*}*/ /*div:nth-of-type(2) {*/ /* border: solid 3px green;*/ /* float: right;*/ /*}*/ /*頁面佈局: 把相關性元素變成一組，佈局就是結構化編組，用大組的設定減少小組設定的工作量*/ /*5.頁面佈局*/ /*具體css樣式表檢視float.less*/ /*6.環繞距離控制*/ /*p {*/ /* border: solid 2px green;*/ /* padding: 20px;*/ /* overflow: hidden;*/ /*}*/ /*p span.shape {*/ /* width: 150px;*/ /* height: 150px;*/ /* padding: 30px;*/ /* margin: 30px;*/ /* border: solid 20px red;*/ /* float: left;*/ /* !*邊線環繞*!*/ /* shape-outside: border-box;*/ /* !*內容環繞*!*/ /* !*shape-outside: content-box;*!*/ /* !*內邊距環繞*!*/ /* !*shape-outside: padding-box;*!*/ /* !*外邊距環繞，預設*!*/ /* !*shape-outside: margin-box;*!*/ /*}*/ /*7.浮動顯示區域形狀定製*/ /*p {*/ /* border: solid 2px green;*/ /* padding: 20px;*/ /* overflow: hidden;*/ /*}*/ /*p span.shape {*/ /* width: 150px;*/ /* height: 150px;*/ /* padding: 30px;*/ /* margin: 30px;*/ /* background-color: red;*/ /* float: left;*/ /* !*圓形*!*/ /* !*clip-path: circle(50% at 100% 100%);*!*/ /* !*橢圓形*!*/ /* !*clip-path: ellipse(30% 50%);*!*/ /* !*多邊形*!*/ /* clip-path: polygon(0 0, 100% 100%, 0 100%);*/ /* !*文字環繞*!*/ /* shape-outside: polygon(0 0, 100% 100%, 0 100%);*/ /*}*/ /*8.圍繞圖片的文字繞排*/ /*p {*/ /* border: solid 2px green;*/ /* padding: 20px;*/ /* overflow: hidden;*/ /*}*/ /*p img.shape {*/ /* width: 150px;*/ /* height: 150px;*/ /* !*border: solid 30px red;*!*/ /* !*padding: 30px;*!*/ /* margin: 30px;*/ /* float: left;*/ /* !*浮動顯示區域形狀定製*!*/ /* clip-path: circle();*/ /* !*環繞距離控制*!*/ /* shape-outside: circle();*/ /*}*/ </style> </head> <body> <!--1.使用clearfix清除浮動--> <!--<main>--> <!-- <div></div>--> <!-- <div></div>--> <!--<!–父元素無法感知浮動的子元素，所以父元素無法根據浮動子元素的高度自動撐開，--> <!--在父元素內部最後面新增一個沒有高度和浮動的子元素，並使用clear:both清除浮動--> <!--以感知上面浮動元素的空間位，所以新添子元素排在浮動元素的最後面，父元素能夠感--> <!--知到新添子元素的空間位，所以父元素就能根據浮動元素的高度自動撐開。--> <!--–>--> <!-- <article class="clearfix"></article>--> <!--</main>--> <!--2.清除浮動對元素的影響--> <!--<div class="red"></div>--> <!--<div class="green"></div>--> <!--<div class="blue"></div>--> <!--3.通過AFTER偽元素清除浮動影響--> <!--<main>--> <!-- <div></div>--> <!-- <div></div>--> <!--</main>--> <!--4.OVERFLOW觸發BFC清除浮動影響--> <!--<main>--> <!-- <div></div>--> <!-- <div></div>--> <!--</main>--> <!--5.頁面佈局--> <!--<header>--> <!-- <nav>--> <!-- <ul>--> <!-- <li>--> <!-- <a href="">系統課程</a>--> <!-- </li>--> <!-- </ul>--> <!-- <div class="button">登入</div>--> <!-- </nav>--> <!--</header>--> <!--<main>--> <!-- <article>文章</article>--> <!-- <aside>側邊框</aside>--> <!--</main>--> <!--<footer>--> <!-- <div>結尾</div>--> <!--</footer>--> <!--6.環繞距離控制--> <!--<p>--> <!-- <span class="shape"></span>--> <!-- Go（又稱 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 開--> <!-- 發的一種靜態強型別、編譯型語言。Go 語言語法與 C 相近，但功能上有：記憶體安全，GC（垃圾回--> <!-- 收），結構形態及 CSP-style 併發計算。羅伯特·格瑞史莫（Robert Griesemer），羅勃·派--> <!-- 克（Rob Pike）及肯·湯普遜（Ken Thompson）於2007年9月開始設計Go，稍後Ian Lance T--> <!-- aylor、Russ Cox加入專案。Go是基於Inferno作業系統所開發的。Go於2009年11月正式宣佈推--> <!-- 出，成為開放原始碼專案，並在Linux及Mac OS X平臺上進行了實現，後來追加了Windows系統下--> <!-- 的實現。在2016年，Go被軟體評價公司TIOBE 選為“TIOBE 2016 年最佳語言”。 目前，Go每半--> <!-- 年釋出一個二級版本（即從a.x升級到a.y）。--> <!--</p>--> <!--7.浮動顯示區域形狀定製--> <!--<p>--> <!-- <span class="shape"></span>--> <!-- Go（又稱 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 開--> <!-- 發的一種靜態強型別、編譯型語言。Go 語言語法與 C 相近，但功能上有：記憶體安全，GC（垃圾回--> <!-- 收），結構形態及 CSP-style 併發計算。羅伯特·格瑞史莫（Robert Griesemer），羅勃·派--> <!-- 克（Rob Pike）及肯·湯普遜（Ken Thompson）於2007年9月開始設計Go，稍後Ian Lance T--> <!-- aylor、Russ Cox加入專案。Go是基於Inferno作業系統所開發的。Go於2009年11月正式宣佈推--> <!-- 出，成為開放原始碼專案，並在Linux及Mac OS X平臺上進行了實現，後來追加了Windows系統下--> <!-- 的實現。在2016年，Go被軟體評價公司TIOBE 選為“TIOBE 2016 年最佳語言”。 目前，Go每半--> <!-- 年釋出一個二級版本（即從a.x升級到a.y）。--> <!--</p>--> <!--8.圍繞圖片的文字繞排--> <!--<p>--> <!-- <img class="shape" src="cat.jpg" alt="cat.jpg">--> <!-- Go（又稱 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 開--> <!-- 發的一種靜態強型別、編譯型語言。Go 語言語法與 C 相近，但功能上有：記憶體安全，GC（垃圾回--> <!-- 收），結構形態及 CSP-style 併發計算。羅伯特·格瑞史莫（Robert Griesemer），羅勃·派--> <!-- 克（Rob Pike）及肯·湯普遜（Ken Thompson）於2007年9月開始設計Go，稍後Ian Lance T--> <!-- aylor、Russ Cox加入專案。Go是基於Inferno作業系統所開發的。Go於2009年11月正式宣佈推--> <!-- 出，成為開放原始碼專案，並在Linux及Mac OS X平臺上進行了實現，後來追加了Windows系統下--> <!-- 的實現。在2016年，Go被軟體評價公司TIOBE 選為“TIOBE 2016 年最佳語言”。 目前，Go每半--> <!-- 年釋出一個二級版本（即從a.x升級到a.y）。--> <!--</p>--> </body> </html>