CSS 浮動(dòng)(float) 寶媽級(jí)教程通俗易懂

標(biāo)準(zhǔn)流

標(biāo)簽按照規(guī)定好的默認(rèn)方式排序
塊級(jí)元素獨(dú)占一行 從上向下順序排列
div hr p h1-h6 ul ol form table

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 300px;
            background-color: #c5708b;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>

為什么需要浮動(dòng)嘞?

很多的布局效果,標(biāo)準(zhǔn)流沒有辦法完成,就需要利用到浮動(dòng)完成布局.

浮動(dòng)可以改變?cè)貥?biāo)簽?zāi)J(rèn)的排列方式

網(wǎng)頁(yè)布局第一準(zhǔn)則:

多個(gè)塊級(jí)元素縱向排列找標(biāo)準(zhǔn)流

多個(gè)塊級(jí)元素橫向排列找浮動(dòng)

? 什么是浮動(dòng)??

float 屬性用于創(chuàng)建浮動(dòng)框
將其移動(dòng)到一邊,直到左邊緣或者右邊緣及包含塊或者另一個(gè)浮動(dòng)框的邊緣

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        div {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            /* left 左浮動(dòng) right 右浮動(dòng) none 不浮動(dòng)(默認(rèn)) */
            float: left;
        }

        h2 {
            color: #1677b3;
            width: 300px;
            background-color: #5698c3;
        }
    </style>
</head>

<body>
    <div>我是div</div>
    <h2>我是h2</h2>
</body>

</html>

浮動(dòng)特性

1.脫離標(biāo)準(zhǔn)普通流的控制移動(dòng)到指定位置脫標(biāo)

2.浮動(dòng)的盒子不再保留原先的位置

3.多個(gè)盒子都設(shè)置浮動(dòng),按照屬性值一行并排頂端對(duì)齊排列(不會(huì)有縫隙,多出另起一行對(duì)齊)

4.浮動(dòng)元素會(huì)具有行內(nèi)塊元素特性(任何元素都可浮動(dòng))

如果塊級(jí)盒子沒有設(shè)置寬度,默認(rèn)寬度和父級(jí)一樣寬,添加浮動(dòng)后,大小由內(nèi)容決定
行內(nèi)元素同理

5.浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流,不會(huì)影響前面的標(biāo)準(zhǔn)流

實(shí)戰(zhàn)小技巧

為了約束浮動(dòng)元素位置,網(wǎng)頁(yè)布局一般采用的策略:先用標(biāo)準(zhǔn)流的父元素排列上下位置,之后內(nèi)部子元素采取浮動(dòng)排列左右位置

清除浮動(dòng)

為什么要清除浮動(dòng)?

由于父級(jí)盒子很多情況下,不方便給高度,但是的盒子浮動(dòng)又不占位置,最后父級(jí)盒子高度為0時(shí),就會(huì)影響下面的標(biāo)準(zhǔn)流盒子.

1.父級(jí)沒有高度

2.子盒子浮動(dòng)了

3.影響下面布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid #000;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

清除浮動(dòng)方法

清除浮動(dòng)本質(zhì):

清除浮動(dòng)元素脫離標(biāo)準(zhǔn)流造成的影響

清除浮動(dòng)策略:

閉合浮動(dòng),只讓浮動(dòng)在父盒子內(nèi)影響,不影響父盒子外面的其他盒子

1. 父級(jí)添加overflow 屬性值設(shè)置hidden auto scroll

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 200px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

弊端:無法顯示溢出的部分

父盒子 500px 子盒子 600px (子盒子的100px被隱藏)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
            overflow: hidden;
        }
        div .child {
            color: bisque;
            width: 600px;
            background-color: #c5708b;
            float: left;
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

2.:after 偽元素法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .father {
            border: 4px solid greenyellow;
            width: 500px;
        }

        div .child {
            color: bisque;
            width: 240px;
            background-color: #c5708b;
            float: left;
        }

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE 6,7專有 解決兼容性問題 */
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="child">我是div01</div>
        <div class="child">我是div02</div>
    </div>
</body>

</html>

3.雙偽元素清除浮動(dòng)

)CSS 標(biāo)準(zhǔn)盒子模型(Box Model)

在網(wǎng)頁(yè)中所有HTML元素可以看作盒子,在CSS中,"box model"術(shù)語是用來設(shè)計(jì)和布局時(shí)使用的;CSS盒模型本質(zhì)上是一個(gè)盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內(nèi)邊距(padding)實(shí)際內(nèi)容(content)四個(gè)屬性,所以布局時(shí)每個(gè)元素所占的總寬高是這4個(gè)屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

1.1Margin(外邊距)清除邊框外的區(qū)域,外邊距是透明的

1.2Border(邊框)圍繞在內(nèi)邊距和內(nèi)容外的邊框

1.3Padding(內(nèi)邊距)清除內(nèi)容周圍的區(qū)域,內(nèi)邊距是透明的

1.4Content(內(nèi)容)盒子里填充的內(nèi)容比如文本,圖像等

標(biāo)準(zhǔn)盒子模型

寬度為100px的div

根據(jù)盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個(gè)寬度為100px的元素,此元素的總寬度必須小于等于100px

2)DIV+CSS布局

Div+CSS布局就是將網(wǎng)頁(yè)內(nèi)容用<div>分割為塊,之后使用css設(shè)置每個(gè)塊的大小,位置等

DIV+CSS布局最重要的是靈活運(yùn)用float(浮動(dòng))屬性,其值:1)left 2)right 3)both

clear屬性作用是清除浮動(dòng),其值為:1)left 2)right 3)both

d2向右浮動(dòng) float:right

因?yàn)閐iv是塊級(jí)元素,如果都沒有脫離文檔流div就會(huì)按照從上到下的順序放置

d2設(shè)置為右浮動(dòng)其他兩個(gè)div位置的變化:

1)d1沒有脫離文檔流會(huì)占據(jù)一行,所以d2只能浮動(dòng)到d1下面的右面如上圖所示

2)d2脫離文檔流,d3自動(dòng)填充到d2的位置

d1,d2全部設(shè)置為右浮動(dòng)

1)當(dāng)d1,d2都設(shè)置為右浮動(dòng)時(shí):因?yàn)閏ss中d1在d2上面先設(shè)置,因此d1在右側(cè),如果d2在d1上面先設(shè)置樣式,則d2在右側(cè),d1在左側(cè),自己測(cè)試不再截圖

2)當(dāng)d1,d2都設(shè)置為右浮動(dòng)時(shí):d3就會(huì)跑到上圖中d2的位置

3)如果3個(gè)div都設(shè)置左或右浮動(dòng),當(dāng)3個(gè)width加一起<=100%就會(huì)在第一行顯示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮動(dòng),d3設(shè)置為右浮動(dòng)

當(dāng)d2清除了左浮動(dòng),d3設(shè)置為右浮動(dòng),就會(huì)如上圖所示;如果d2清除的是右浮動(dòng),d2就會(huì)在d1上面,d3就會(huì)定位在d1下面的右面,自己測(cè)試不再截圖

當(dāng)d2清除了左浮動(dòng),如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設(shè)置其上下左右屬性使其定位在d1右側(cè),自己測(cè)試

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局綜合運(yùn)用position+上下左右屬性與float屬性為網(wǎng)頁(yè)進(jìn)行布局

注意:瀏覽器的兼容性問題,特別是使用IE內(nèi)核的瀏覽器對(duì)W3C的規(guī)范不怎么遵守

.昨日回顧

CSS的介紹

CSS，Cascading Style Sheets層疊樣式表。

一個(gè)網(wǎng)頁(yè)由三個(gè)部分：結(jié)構(gòu)、表現(xiàn)、行為，對(duì)應(yīng)的標(biāo)準(zhǔn)是：XHTML、CSS、JavaScript。

這三個(gè)標(biāo)準(zhǔn)語言，是瀏覽器直接可以識(shí)別的，并且能直接進(jìn)行解釋(翻譯)的。

CSS的格式

一個(gè)CSS樣式表(<style></style>)由多個(gè)CSS規(guī)則構(gòu)成；

一個(gè)CSS規(guī)則由“選擇器”和{}構(gòu)成；

選擇器就是給哪一個(gè)HTML元素定義；

CSS選擇器

第一：基本選擇器（單一）

通用選擇器(*)：將匹配所有的HTML元素；
標(biāo)簽選擇器：對(duì)應(yīng)所有的HTML標(biāo)記，名稱與標(biāo)記名稱一樣。
類選擇器：可以通過給一類HTML元素，定義同一個(gè)class屬性來增加樣式。類樣式定義以“.”開頭定義。CSS的CLASS屬性一般給層疊樣式用表。比如：

.news表示class=news的元素增加樣式
news表示class=news的<div>元素增加樣式
.news title表示class=news下的class=title的<div>元素

ID選擇器：給標(biāo)記特定ID屬性的HTML元素來增加樣式。\

Id選擇器的定義，以“#”號(hào)開頭
網(wǎng)頁(yè)不能出現(xiàn)同一個(gè)ID的值，ID像身份證號(hào)，具有唯一性；
HTML元素的ID屬性，一般給JavaScript使用

第二：組合選擇器

多元素選擇器：也就是同時(shí)給多個(gè)HTML元素定義。

body,p,a,ul,li,p{margin:0px;padding:0px;}
每一個(gè)HTML元素都具有默認(rèn)樣式。

后代元素選擇器：用空格來分隔各個(gè)選擇器。

.news .title p{background-color:#FF0000;}

子元素選擇器：用>號(hào)來分隔父子選擇器，不存在第三層級(jí)的問題。

第三：偽類選擇器

偽類選擇器一般是給超鏈接<a>標(biāo)記來增加樣式。

超鏈接具有四個(gè)狀態(tài)：

正常狀態(tài) a:link{ }

放上狀態(tài) a:hover{ }

激活狀態(tài)a:active{ }

訪問過狀態(tài) a:visited{ }

全局鏈接

a:link,a:visited{color:#333;text-decoration:none;}

a:hover{color:#FF0000,text-decoration:underline;}

給鏈接增加類樣式 (class=“a2”)

a.a2:link,a.a2:visited{ }

a.a2:hover{ }

CSS的繼承性

CSS內(nèi)部元素將繼承外部元素的樣式，多個(gè)外層元素的樣式就疊加到內(nèi)層元素上。<body>元素是網(wǎng)頁(yè)中最大的標(biāo)記，它中的樣式將被其它子元素繼承。

哪些CSS屬性能被繼承：color、font-size、font-weight、font-style、line-height、text-indent、letter-spacing、word-spacing、text-align等

引入CSS的方式

（1）內(nèi)嵌式

通過<style></style>來書寫CSS代碼。

只能應(yīng)用于當(dāng)前網(wǎng)頁(yè)，不能被其它網(wǎng)頁(yè)共享。

注意：<style>標(biāo)記可以放在網(wǎng)頁(yè)的任何地方，但一般放在<head>。

（2）外聯(lián)式

通過<link>標(biāo)記來引入外部的CSS文件(.css)。

可以被其它網(wǎng)頁(yè)共享。public.css index.css news.css about.css

格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />

注意：<link>標(biāo)記只能放在<head>中

（3）行內(nèi)樣式

通過style的屬性來書寫CSS代碼。

每一個(gè)HTML元素，都有 style、class、id、name、title 屬性。

舉例：<p style=“font-size:24px;”></p>

CSS的字體/文本屬性

Font-size：文字大小

Font-weight：加粗

Font-style：斜體

Color：顏色

Line-height：行高

Text-indent：首行縮進(jìn)

Text-align：水平對(duì)齊

Letter-spacing：字符間距

CSS列表

List-style-type：列表類型，取值：none、circle、 square

List-style-position：符號(hào)位置，取值：inside、outside

List-style-image：圖片路徑，舉例：list-style-image:url(images/li01.gif);

2.CSS背景屬性

Background-color：背景顏色

Background-image：背景圖片，舉例：background-image:url(images/bg.gif);

Background-repeat：背景平鋪，取值：no-repeat(不平鋪)、repeat(平鋪)、repeat-x(x方向)、repeat-y(y方向)

Background-position：背景定位，取值：固定值或百分比

格式：background-position:水平方向垂直方向;

用固定值定位：background-position:100px 0px; //距離左邊100px，距離上邊0px

用百分比定位：background-position:50% 50%; //水平方向居中垂直方向居中

用單詞來定位：background-postion:left|center|right top|center|bottom; 三個(gè)值取其中一個(gè)

Background-attachment：附加信息，取值：scroll(滾動(dòng))、fixed(固定)

簡(jiǎn)寫形式：background:url(images/bg.gif) repeat-x 100px 0px; //多個(gè)屬性值間用“空格”隔開

3.CSS浮動(dòng)和清除

Float：元素浮動(dòng)，取值：left或right。

Clear：清除浮動(dòng)，取值：left或right或both

CSS浮動(dòng)元素將向左向右浮動(dòng)；

浮動(dòng)可以叫“飄”起來；

浮動(dòng)的元素，直到碰到父元素的邊框或前一個(gè)浮動(dòng)元素的邊框?yàn)橹梗?/p>

浮動(dòng)元素是一個(gè)塊元素框，不管它原來是什么元素(行內(nèi)元素)；

浮動(dòng)元素不再占用空間，脫離了普通文檔流，層級(jí)比普通元素的級(jí)別高；

清除浮動(dòng)

清除浮動(dòng)特性后，清除元素之后的其它元素將恢復(fù)默認(rèn)排版；
清除浮動(dòng)特性后，包圍元素從視覺上看起來，像包圍住了浮動(dòng)元素；

4.CSS邊框?qū)傩?/h1>
Border：同時(shí)設(shè)置四個(gè)邊框的屬性
Border-left：設(shè)置左邊框的屬性
Border-right：設(shè)置右邊框的屬性
Border-top：設(shè)置頂邊框的屬性
Border-bottom：設(shè)置底邊框的屬性
格式：border-bottom：粗細(xì) 線型線顏色;
舉例：border-bottom：2px solid #FF0000; //元素的下邊線為2px粗的實(shí)線，顏色為紅色
線型取值：none(無邊線)、solid(實(shí)線)、dashed(虛線)、dotted(點(diǎn)狀線)、double(雙線)

5.“盒子”模型

每一個(gè)HTML元素可以看成一個(gè)“盒子”。

一個(gè)“盒子”具有：寬度、邊框、內(nèi)填充、外邊距

寬度(width)和高度(height)：是指內(nèi)容的寬度和高度，不含邊框、外邊距、內(nèi)填充。

內(nèi)填充(padding)：是指內(nèi)容到邊框線間的距離，含四個(gè)方向：上、右、下、左

外邊距(margin)：是指邊框線以外的距離。

計(jì)算一個(gè)“盒子”的總空度

假設(shè)：總寬度為100px，邊框?yàn)?px，內(nèi)填充為10px，求內(nèi)容的寬度

Width = 100px – 1px*2 -10px*2 = 78px

假設(shè)：總寬度為100px，內(nèi)容的寬50px，求左右內(nèi)填充分別是多少？

Padding-left = (100px – 50px )/2 = 25px

6.CSS內(nèi)填充padding

Padding-left：左邊線到內(nèi)容間的距離

Padding-right：右邊線到內(nèi)容間的距離

Padding-top：頂邊線到內(nèi)容間的距離

Padding-bottom：底邊線到內(nèi)容間的距離

Padding：同時(shí)設(shè)置四個(gè)邊的內(nèi)填充距離

padding:10px; //表示：上下左右四個(gè)內(nèi)填充都是10px

padding:5px 10px; //表示：上下為5px，左右為10px

padding:5px 10px 15px; //表示：上為5px，左右為10px，下為15px

padding:5px 10px 15px 20px; //表示：上右下左分別設(shè)置不同的內(nèi)填充，順序不可亂

7.CSS外邊距margin

Margin-left：左邊線以外的距離

Margin-right：右邊線以外的距離

Margin-top：頂邊線以外的距離

Margin-bottom：底邊線以外的距離

Margin:10px; //表示：四個(gè)外邊距都是10px

Margin:10px 15px; //表示：上下外邊為10px，左右外邊距為15px

Margin:5px 10px 15px //表示：上外邊距為5px，左右外邊距為10px，下外邊距為15px

Margin:5px 10px 15px 20px; //分別設(shè)置四外外邊距，順序?yàn)椤?strong>上右下左”

8.綜合案例：PHP首頁(yè)

一、首先要確定的事情

主頁(yè)的寬度：973px

主頁(yè)的背景色、背景圖片

網(wǎng)頁(yè)的結(jié)構(gòu)：網(wǎng)頁(yè)頭部、網(wǎng)頁(yè)尾部、網(wǎng)頁(yè)主要內(nèi)容（左右兩列）

二、網(wǎng)頁(yè)結(jié)構(gòu)圖

在線咨詢

上一篇：Word如何轉(zhuǎn)換為HTML？Word轉(zhuǎn)HTML具體操作步驟
下一篇：HTML超大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

CSS 浮動(dòng)(float) 寶媽級(jí)教程 通俗易懂