浮動是為了元素標簽的并排顯示問題。
我們在瀏覽網頁的時候,經常會看到 幾個 div 塊是可以并排顯示的, 浮動就是解決這樣問題的方法之一。
float屬性有以下的值
浮動的特點
一個浮動的例子
<!--一個浮動的例子-->
<style>
.box1 {
width: 600px;
height: 200px;
border: 1px solid #000;
}
.box1 .con1 {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box1 .con2 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.box1 .con3 {
width: 201px;
height: 200px;
background-color: yellowgreen;
float: left;
}
</style>
<div class="box1">
<div class="con1"></div>
<div class="con2"></div>
<div class="con3"></div>
</div>
一個順序貼靠的例子
<!-- 一個順序貼靠的例 子-->
<!-- 以下代碼中 兄弟元素 con1, con2, con3 之間會進行順序貼靠-->
<!-- con3 在貼靠 con2 的時候,發現父容器的寬度只能是400px, 分別被con1 和 con2 占據, 所以con3 會找 cont1 貼靠,最終con3 位于 con1右邊, con2下邊 -->
<style>
.box1 {
width: 400px;
height: 200px;
border: 1px solid #000;
}
.box1 .con1 {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box1 .con2 {
width: 200px;
height: 100px;
background-color: blue;
float: left;
}
.box1 .con3 {
width: 200px;
height: 100px;
background-color: yellowgreen;
float: left;
}
</style>
<div class="box1">
<div class="con1"></div>
<div class="con2"></div>
<div class="con3"></div>
</div>
清除浮動是為了 不影響設置浮動標簽的后續的標簽的布局展示。
因為,在一個父容器中,子元素浮動了,脫離了標準文檔流,不在占用之前的位置,會導致 無法撐開沒有設置高度的父元素;從而導致后續的結構擠壓,造成整個頁面布局的混亂。
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 100px;
}
p {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: red;
}
</style>
<body>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.box2 {
margin-top: 20px;
clear: both;
}
p {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: red;
}
</style>
<body>
<div>
<p></p>
<p></p>
</div>
<div class="box2">
<p></p>
<p></p>
<p></p>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.cleafix::after {
content: '';
clear: both;
display: block
}
p {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: red;
}
</style>
<body>
<div class="cleafix">
<p></p>
<p></p>
</div>
<div class="cleafix">
<p></p>
<p></p>
<p></p>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.clearboth {
clear: both;
}
p {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: red;
}
</style>
<body>
<div>
<p></p>
<p></p>
</div>
<div class="clearboth"></div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</body>
頁面布局中,有兩個非常常用的CSS屬性。它們巧妙的控制著塊級元素們之間的位置,靈活的讓塊級元素在一行內顯示或者另起一行。說到這里,相信大家已經猜出來了,這兩個屬性就是控制塊級元素浮動的屬性。整個頁面布局過程中,浮動屬性的使用頻率是最高的。今天,小海老師就來帶領大家一同認識這兩個神奇的CSS屬性。
承接文章:發揮個人的優勢,踏踏實實的學習前端開發,小海為你傳授學習心得
技術等級:初級 | 適合前端開發的初學者閱讀學習。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號,因為這些文章都是連載的,并且是經過系統的歸納和總結的。塌下心來認真閱讀,你一定會學到對你有用的知識。
一、浮動屬性:
CSS技術使用float屬性來實現塊級元素的浮動效果。
CSS技術使用float屬性實現浮動效果
該屬性可以有下列取值:
left,控制塊級元素左浮動。
right,控制塊級元素右浮動。
屬性說明:我們都知道,塊級元素之間默認情況下是獨占一行的。也就是說,兩個在代碼中緊密相連的塊級元素,它們的擺放位置是一個在上一行,另一個在下一行。盡管通過width和height屬性為塊級元素設置了大小,使得塊級元素無法占滿整個行,但是塊級元素右側空余的位置仍然不允許出現任何內容。
讓我們一同來看下列實例:
HTML代碼如下所示:
<div id=”box01”></box>
<div id=”box02”></box>
CSS代碼如下所示:
#box01,#box02{
width:200px; height:100px;
}
#box01{background-color:#ff5857;}
#box02{background-color:#5857ff;}
上述代碼的運行結果如下圖所示,這張圖為我們展示了兩個塊級元素默認的位置擺放。
展示兩個塊級元素的默認位置
如果我想讓兩個塊級元素在一行內顯示該如何實現呢?這就需要float屬性登場了。
將#box01的CSS代碼中添加如下屬性:float:left,會發生什么情況呢?同學們實踐操作一下,我們會發現,屏幕中就只剩下紅色的塊級元素了。那藍色的#box02去哪里了呢?其實#box02響應了#box01浮動的號召,和#box01一同出現在同一行了,只是被壓在了紅色的#box01的下面。
解決方法就是讓藍色的#box02也添加上 float:left的屬性。這樣,兩個塊級元素就可以共同出現在一行了。下圖為我們展示了這樣的效果。
展示兩個塊級元素的左浮動位置
下面讓我們再看一個實例,這個實例中我們為兩個塊級元素添加一個容器。
HTML代碼如下所示:
<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>
我們設置容器#box的寬度為400px。內部的兩個塊級元素:.boxLeft的寬度設置為150px;.boxRight的寬度設置為100px。要求讓這兩個內部的塊級元素在一行內顯示,并且分布到容器的兩端。
CSS代碼如下所示:
#box{
width:400px; height:100px;
background-color:#cccccc;
}
#box .boxLeft{
width:150px; height:100px;
background-color:#ff5857;
float:left;
}
#box .boxRight{
width:100px; height:100px;
background-color:# 5857 ff;
float:right;
}
我們可以看到,在.boxRight對象上,我們添加了float:right的CSS屬性,讓這個塊級元素發生了右浮動,則該元素跑到了容器的最右側。下圖為我們展示了這樣的效果。
展示兩個塊級元素的左右浮動位置
浮動屬性的使用結論:
若希望多個塊級元素在一行內顯示,則這幾個塊級元素都要具備float浮動屬性。
二、清除浮動屬性:
CSS技術使用clear屬性來實現塊級元素的清除浮動效果。
CSS技術使用clear屬性設置清除浮動效果
該屬性可以有下列取值:
left,清除塊級元素的左浮動效果。
right,清除塊級元素的右浮動效果。
both,清除塊級元素的兩端浮動效果。
屬性說明:根據上面的float屬性的使用,我們可想而知,一個緊跟在具有浮動屬性的塊級元素后面的塊級元素,即使它不想和它前面的塊級元素在一行內顯示,也會受到前面塊級元素浮動屬性的影響,被壓在前面塊級元素的下方。
解決這個問題,可以對不希望和前面塊級元素在同一行顯示的塊級元素使用清除浮動屬性。
下面讓我們來看這個實例:
HTML代碼如下所示:
<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>
CSS代碼如下所示(#box .boxRIght):
#box .boxRight{
width:100px; height:100px;
background-color:# 5857ff;
clear:left;
}
因為.boxRight具備clear:left屬性,所以即使.boxLeft使用了float:left屬性,它們也仍舊分布在兩行,不會在同一行顯示。就好像沒有過使用任何浮動效果似的。
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容,可以私信我,我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你,幫助你在前端開發的道路上闊步前行。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章,逐步學到一定的知識,甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗,每寫一篇時我都盡量把握好措辭,用簡單易懂的語言描述,同時精心設計版面,讓版面更加豐富,激發閱讀興趣。所以,每一篇文章可能篇幅不長,但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號,因為這些文章都是連載的,并且是經過系統的歸納和總結的。塌下心來認真閱讀,你一定會學到對你有用的知識。
關注“小海前端”,我會繼續為大家奉上更加深入的前端開發文章,也希望更多的初學者跟著學下去,我們共同將前端開發的路努力堅持的走下去。
結合前面所學的CSS知識,使用今天的浮動屬性,可以做一個簡單的導航欄。那么下一篇文章中,小海老師會帶領大家一同利用最近的所學,做一個水平放置的導航欄。效果非常酷炫,希望正在學習前端開發的同學們千萬不要錯過。
SS中的浮動(Floats)、定位(Positioning)和顯示(Display)屬性是前端工程師掌握頁面布局的關鍵。本文將深入探討這些屬性的工作原理和使用場景,幫助開發者更好地理解和運用它們來構建響應式和精確的網頁布局。
浮動是CSS中用于實現元素排列的一種方式,它可以讓元素脫離正常的文檔流,并可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動元素的邊緣。
.element {
float: left; /* 或者 'right' */
}
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
定位屬性允許你控制元素的位置,它可以是相對于它的正常位置、相對于最近的已定位祖先元素、相對于視口或絕對位置。
.element {
position: static | relative | absolute | fixed | sticky;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 0;
right: 0;
}
.fixed-element {
position: fixed;
bottom: 0;
left: 0;
}
.sticky-element {
position: sticky;
top: 10px;
}
display屬性是CSS中最重要的用于控制布局的屬性之一,它定義了元素如何顯示在頁面上。
.element {
display: block | inline | inline-block | flex | grid | none;
}
.block-element {
display: block;
}
.inline-element {
display: inline;
}
.inline-block-element {
display: inline-block;
}
.flex-container {
display: flex;
}
.grid-container {
display: grid;
}
.hidden-element {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="navigation">Navigation</div>
</div>
<div class="main-content">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
<div class="fixed-element">Fixed Element</div>
</body>
</html>
/* Reset some default styles */
body, h1, p {
margin: 0;
padding: 0;
}
/* Header styles */
.header {
background-color: #f8f8f8;
border-bottom: 1px solid #e7e7e7;
padding: 10px;
overflow: hidden; /* Clearfix for floated elements */
}
.logo {
float: left;
font-size: 24px;
}
.navigation {
float: right;
font-size: 18px;
}
/* Main content styles */
.main-content {
padding: 20px;
}
.sidebar {
float: left;
width: 200px;
background-color: #ddd;
padding: 10px;
}
.content {
margin-left: 220px; /* Make space for the sidebar */
background-color: #eee;
padding: 10px;
}
/* Footer styles */
.footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
text-align: center;
padding: 10px;
position: relative; /* For demonstration purposes */
top: 20px; /* Move the footer down a bit */
}
/* Fixed element styles */
.fixed-element {
position: fixed;
bottom: 10px;
right: 10px;
padding: 5px 10px;
background-color: #333;
color: #fff;
z-index: 1000; /* Ensure it stays on top */
}
/* Clearfix hack */
.clearfix::after {
content: "";
clear: both;
display: table;
}
在這個例子中,我們創建了一個包含頭部、側邊欄、主要內容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導航,以及創建一個側邊欄。我們還使用了相對定位來稍微下移頁腳,并使用固定定位為頁面添加了一個始終可見的固定元素。最后,我們使用了overflow: hidden;來清除頭部中浮動元素的影響。
浮動、定位和顯示屬性是CSS中構建復雜布局的強大工具。通過深入理解和正確應用這些屬性,前端工程師可以創建出既美觀又功能強大的網頁。隨著Web標準的不斷發展,我們也需要不斷學習和適應新的CSS特性,以保持我們技能的前沿性。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。