整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS中的浮動（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁面布局的關(guān)鍵。本文將深入探討這些屬性的工作原理和使用場景，幫助開發(fā)者更好地理解和運(yùn)用它們來構(gòu)建響應(yīng)式和精確的網(wǎng)頁布局。
浮動是CSS中用于實現(xiàn)元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動元素的邊緣。
.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;
}
在這個例子中，我們創(chuàng)建了一個包含頭部、側(cè)邊欄、主要內(nèi)容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導(dǎo)航，以及創(chuàng)建一個側(cè)邊欄。我們還使用了相對定位來稍微下移頁腳，并使用固定定位為頁面添加了一個始終可見的固定元素。最后，我們使用了overflow: hidden;來清除頭部中浮動元素的影響。
浮動、定位和顯示屬性是CSS中構(gòu)建復(fù)雜布局的強(qiáng)大工具。通過深入理解和正確應(yīng)用這些屬性，前端工程師可以創(chuàng)建出既美觀又功能強(qiáng)大的網(wǎng)頁。隨著Web標(biāo)準(zhǔn)的不斷發(fā)展，我們也需要不斷學(xué)習(xí)和適應(yīng)新的CSS特性，以保持我們技能的前沿性。
嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個階段，堅持學(xué)習(xí)3個月蛻變?yōu)閃eb前端高手哦！
志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！
1 文檔流介紹
浮動（ float）
普通流（ normal flow）也叫標(biāo)準(zhǔn)流、文檔流
前面我們說過，網(wǎng)頁布局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？
CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動和定位
htmi語言當(dāng)中另外一個相當(dāng)重要的概念——標(biāo)準(zhǔn)流！或者普通流，或者文檔流。普通流實際上就是一個網(wǎng)頁內(nèi)標(biāo)簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨(dú)占一行，行內(nèi)元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現(xiàn)例外的情況叫做普通流布局。
2 浮動是用來做文字環(huán)繞效果的
浮動最早是用來控制圖片，以便達(dá)到其他元素（特別是文字）實現(xiàn)“環(huán)繞圖片的效果。
后來，我們發(fā)現(xiàn)浮動有個很有意思的事情：就是讓任何盒子可以一行排列因此我們就慢慢的偏離主題，用浮動的特性來布局了。（CSS3已經(jīng)是我們真正意義上的網(wǎng)頁布局，具體CSS3我們會詳細(xì)解釋）
3 體會浮動
元素的浮動是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)普通流的控制，移動到其父元素中指定位置的過程。
在CSS中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器{ float：屬性值；}
4 浮動就是漂浮的意思
浮動脫離標(biāo)準(zhǔn)流，不占位置，會影響標(biāo)準(zhǔn)流。可以蓋住標(biāo)準(zhǔn)流。浮動只有左右浮動。
5 浮動首先需要添加標(biāo)準(zhǔn)流父級
浮動首先創(chuàng)建包含塊的概念（包裹）。就是說，浮動的元素總是找離它最近的父級元素對齊。但是不會超出內(nèi)邊距的范圍。
6 浮動特性對齊父盒子
7 浮動特性盒子排列
浮動的元素排列位置，跟上一個元素（塊級）有關(guān)系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標(biāo)準(zhǔn)流，則A元素的頂部會和上一個元素的底部對齊。
一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
8 浮動影響盒子顯示模式
元素添加浮動后，元素會具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少。
浮動根據(jù)元素書寫的位置來顯示相應(yīng)的浮動。
9 浮動總結(jié)
浮動的目的就是為了讓多個塊級元素同一行上顯示。
float浮漏特（形象的表示）
浮：加了浮動的元素盒子是浮起來的，漂浮在其他的標(biāo)準(zhǔn)流盒子上面。
漏：加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏給了標(biāo)準(zhǔn)流的盒子。
特：特別注意，首先浮動的盒子需要和標(biāo)準(zhǔn)流的父級搭配使用，其次特別的注意浮動可以使元素顯示模式體現(xiàn)為行內(nèi)塊特性。
10 版心和布局流程
閱讀報紙時容易發(fā)現(xiàn)，雖然報紙中的內(nèi)容很多，但是經(jīng)過合理地排版，版面依然清晰、易讀。同樣，在制作網(wǎng)頁時，要想使頁面結(jié)構(gòu)清晰、有條理，也需要對網(wǎng)頁進(jìn)行“排版”。
“版心”是指網(wǎng)頁中主體內(nèi)容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960pX、980px、1000px、1200px等。
布局流程
為了提高網(wǎng)頁制作的效率，布局時通常需要遵守一定的布局流程，具體如下：
1、確定頁面的版心（可視區(qū)）。
2、分析頁面中的行模塊，以及每個行模塊中的列模塊。
3、制作HTML頁面，CSS文件。
4、CSS初始化，然后開始運(yùn)用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個模塊。
11 一列固定寬度且居中
12 兩列左套右寬型
快捷生成框架：
按tab鍵即可生成如下框架：
13 通欄平均分布型
看不懂的小伙伴不要?dú)怵H，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學(xué)習(xí)，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。
本章已結(jié)束，下篇文章將分享《12 清除浮動》小伙伴們不要錯過喲！
. Float basics 浮動基礎(chǔ)
在了解浮動之前，要先了解文檔流。文檔流是正式輸出的流。元素在前面的元素先輸出。元素寫在后面的后輸出。塊級元素占滿一行。內(nèi)聯(lián)元素按內(nèi)容的大小占空間。且不占一行。文檔流有別于浮動流。根據(jù)w3school規(guī)定，由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。如下：
這個黃色的框在左浮動后，他下面的文字p元素就上來了。（為什么上來，因為p元素忽視浮動框的存在。P是文檔流。黃色框是浮動流。）這樣，他和黃色框是在同一行。文字照顧到框的存在所以向后縮進(jìn)。其實<p>是也占一行的。但是它忽視黃色框的存在。按正常的文檔流輸出。Float以前主要是用于文字環(huán)繞圖片的效果。
注釋： 所有元素屬性中有float或者position：abselute后 這個元素輸出就是浮動流。怎么浮動看第2條。個人這么理解：浮動元素跟著浮動元素走。不考慮文檔流。
1. 什么是浮動？
浮動是指浮動一個元素。當(dāng)你浮動一個元素后，他就會變成一個塊級元素。而且浮動時元素只能浮動到同一行的左邊或者右邊。
浮動的盒子脫離文檔流，然后飄到最左邊或者最后邊。（具體見下面的解釋！）
2. Where will a floated element move to? 浮動元素怎么浮動！
Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.
浮動的元素到達(dá) body元素的邊框
或者 其父元素的邊框或者到達(dá)另外一個浮動的邊框。
If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.
譯文：如果對于浮動元素來講他所在的行沒有足夠的空間給他。他會移到下面的一行。下面的例子：黑盒子做float：left，黃色的做float：right。
3．當(dāng)你浮動一個元素時，需要設(shè)置一個寬度。
4. 下面分析的是：一個元素在浮動元素的上面或者下面。
（重要的知識點：）★★★★★★★
第一：塊級元素在上，飄的元素在下。塊級元素不會受到影響。
第二：如果飄的元素在上，在他下面的元素講會受他的影響，包圍他。對于文字的話他會圍繞飄的元素。但是其他塊級元素，圖片會伸展到其地下去。這個我從dreamweaver中已經(jīng)也看到了。
看圖：
如果你不想《p》元素上去了和黃色的框在同一行。可以用：清除浮動。
對p實行清除浮動。
處理這樣的問題，可以對塊級使用清除浮動。
規(guī)則如下：clear: left 、clear: right; clear:none;
如果你不想在浮動層下面的元素包圍浮動層，你可以用清除浮動。
總結(jié)：一般元素浮動后，會空出自己的所有行。左邊也好右邊也好。
然后其他元素就會包圍他。他需要清除自己的左邊或者右邊。就是表示他還是像以前那樣占那么多行。比如圖片占了那么多行。不讓其他元素包圍他。
要理解下面的現(xiàn)象：
上面的圖片是由這個排列出來的。
Div4 因為第一行排不下去了，所以要下來。他這里有一個過程：先排到div3后面，因為排不下去了，后來就又飛到了div1的下面。因為div1高度高，把他給卡住啦。就出現(xiàn)了這樣的情況。
基本概念：
Viewport是windows窗口的文檔可見部分。
Initial containing block：是對于頁面來講的。指頁面的總寬和長。
Containing box：指的是一個box。這個box帶有其他元素，比如p，ul等元素。
Normal flow：文檔的正常輸出，如果沒有float 或者position應(yīng)用到這個元素。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
