cssfloat與學(xué)習(xí)騎自行車

div+css布局，是前端開發(fā)人員的核心技能，在工作中占很大的比重。良好的前端布局是進(jìn)行javascript書寫和交互的基礎(chǔ)，足見布局的重要性，今天我們就講講css布局的基石-float?？梢哉f，沒有浮動(dòng)，就談不上布局了。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供行唐網(wǎng)站建設(shè)、行唐做網(wǎng)站、行唐網(wǎng)站設(shè)計(jì)、行唐網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、行唐企業(yè)網(wǎng)站模板建站服務(wù)，十余年行唐做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

1、float的產(chǎn)生

互聯(lián)網(wǎng)產(chǎn)生從一開始到日漸壯大，期間借鑒了大量印刷排版的理念和技術(shù)，比如一開始互聯(lián)網(wǎng)的發(fā)明，就是將文檔電子化互相鏈接。

而后的table布局的發(fā)明，也是印刷專家完成的，直到css出現(xiàn)，依然可以看到印刷的影子，當(dāng)然這也無可厚非，比如float的出現(xiàn)就是為了應(yīng)對圖文并茂的排版出現(xiàn)的。

下面?zhèn)鹘y(tǒng)的印刷排版常見的布局-文字環(huán)繞，就是float的常見應(yīng)用場景之一。

css float與學(xué)習(xí)騎自行車

我們看看如何實(shí)現(xiàn)，

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS暗黑編年史</title>
    <style>
        img{
            float:left;
        }
    </style>
</head>

<body>
    <p>
        <img src="https://jetorz.github.io/assets/Brendan-Eich.jpg" alt="" width="200">
        在一個(gè)一個(gè)炎熱的下午，大家注意，一定要是炎熱的下午，為什么要是炎熱的下午呢，因?yàn)樘鞖庖粺?，人就容易煩躁，人一煩躁就不想工作，不工作就想看片兒（注意看片兒不是看電影），但是你知道的越看片兒越煩躁，正在這個(gè)時(shí)候老板娘進(jìn)來來了，對js的作者布萊登·艾克說，小艾啊你看我們用貓上網(wǎng)的時(shí)候用戶名密碼填錯(cuò)了結(jié)果等一兩分鐘返回結(jié)果的時(shí)候才知道是錯(cuò)了，你看你能不能搞一個(gè)程序讓我在請求之前就知道我寫錯(cuò)了，其實(shí)小艾心里不想搞，但是大家都懂的，老板好拒絕，老板娘的需求是不好拒絕的，所以布萊登艾克心想趕緊隨便糊弄一下算了，片兒還沒看完呢，所以他就用了8天半（官方說）10天，其實(shí)另外的一天半被他用來看片兒了。大家懂的，你看片兒的時(shí)候有心思寫代碼嗎？所以js的bug如山一樣多，這個(gè)我們以后說。
    </p>
</body>
</html>

2.float的經(jīng)典場景

除了上面的經(jīng)典用法之外，float還有幾個(gè)更復(fù)雜也更通用的場景，首先是整站布局。

css float與學(xué)習(xí)騎自行車

代碼如下，

<!DOCTYPE html>
<html>

<head>
    <style>
        #header {
            background-color: black;
            color: white;
            text-align: center;
            padding: 5px;
        }

        #nav {
            line-height: 30px;
            background-color: #eeeeee;
            height: 300px;
            width: 100px;
            float: left;
            padding: 5px;
        }

        #section {
            width: 350px;
            float: left;
            padding: 10px;
        }

        #footer {
            background-color: black;
            color: white;
            clear: both;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>

<body>

    <div id="header">
        <h2>我是頭部</h2>
    </div>

    <div id="nav">
        html教程<br>
        css教程<br>
        js教程<br>
    </div>

    <div id="section">
        <h3>js暗黑編年史</h3>
        <p>
            在一個(gè)一個(gè)炎熱的下午，大家注意，一定要是炎熱的下午，為什么要是炎熱的下午呢，因?yàn)樘鞖庖粺?，人就容易煩躁，人一煩躁就不想工作，不工作就想看片兒（注意看片兒不是看電影），但是你知道的越看片兒越煩躁，正在這個(gè)時(shí)候老板娘進(jìn)來來了，對js的作者布萊登·艾克說，小艾啊你看我們用貓上網(wǎng)的時(shí)候用戶名密碼填錯(cuò)了結(jié)果等一兩分鐘返回結(jié)果的時(shí)候才知道是錯(cuò)了，你看你能不能搞一個(gè)程序.
        </p>

    </div>

    <div id="footer">
        我是footer
    </div>
</body>
</html>

還有類似淘寶的商品布局也很普遍，

css float與學(xué)習(xí)騎自行車

實(shí)現(xiàn)代碼如下，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div2{
            background: red;
            margin-right: 10px;
            height: 300px;
        }
        #div3{
            padding: 5px;
        }
        #div2,#div3{
            float: left;
            width:300px;

        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">

        </div>
        <div id="div3">
            <h4>我是標(biāo)題</h4>
            <p>我是一段描述的文字我是一段描述的文字我是一段描述的文字我是一段描述的文字</p>
        </div>
    </div>
</body>
</html>

3.float的常見問題

1.寬度不夠,會(huì)擠下來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrap{
            width:1000px;
            margin: 0 auto;
        }
        div{
            border:5px solid #000;
        }
        #left{
            width:200px;
            background:red;
            height: 300px;
            float: left;
        }
        #right{
            width:800px;
            background:green;
            height: 300px;
            float: left;

        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left">左側(cè)</div>
        <div id="right">右側(cè)</div>
    </div>
</body>
</html>

解決，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrap{
            width:1000px;
            margin: 0 auto;
            border:5px solid yellow;
        }
        div{
            border:5px solid #000;
        }
        #left{
            width:200px;
            background:red;
            height: 300px;
            float: left;
            box-sizing: border-box;
        }
        #right{
            width:800px;
            background:green;
            height: 300px;
            float: left;
            box-sizing: border-box;
            }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left">左側(cè)</div>
        <div id="right">右側(cè)</div>
    </div>
</body>
</html>

如圖所示，大家會(huì)發(fā)現(xiàn)其實(shí)外層div的高度沒有撐開，這里我不想解釋原因，扯什么BFC啦，文檔流啦，為什么？

編程就像學(xué)習(xí)騎自行車，你看過別人怎么騎車，也知道踏板是用來蹬的，車座是用來座的，車把是用來掌握方向就夠了，你沒必要從一開始研究：

css float與學(xué)習(xí)騎自行車

山地車30速對應(yīng)的是：這個(gè)山地車的變速套件是由3片式牙盤和10片式飛輪組成，可以變換30種傳動(dòng)比，也就是齒比。詳細(xì)的解釋是：前面牙盤有三個(gè)盤，后面飛輪有10個(gè)，3x10就是30速，如果后面有9個(gè)飛輪就是27速，速別就是前面的盤的數(shù)量乘后面輪的數(shù)量，一般情況下前面都是三個(gè)盤，主要差距在于后面的小飛輪，常見的速別有18、21、24、27、30。

畢竟你不可能一開始學(xué)騎車就想著將來成為秋名山車神。

css float與學(xué)習(xí)騎自行車

即使你學(xué)會(huì)這些，對于你學(xué)習(xí)騎車沒有什么幫助，就像你即使知道了高度沒有撐起來是因?yàn)闆]有觸發(fā)BFC，就算是你知道了文檔流和常規(guī)流，知道了float的默認(rèn)值是none，對于你能流暢的布局有多少幫助呢？

我不是否認(rèn)這些知識(shí)的價(jià)值，是要讓你懂得輕重緩急。畢竟如果你連最基礎(chǔ)的float布局都寫得磕磕絆絆，你研究那些有什么意義呢？先把典型的布局記住，學(xué)會(huì)，用熟，然后再聊其他的。繼續(xù)第二個(gè)問題，

2.高度不夠，直接一句話，記住就好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrap{
            width:1000px;
            margin: 0 auto;
            border:5px solid yellow;
            overflow: hidden;
        }
        div{
            border:5px solid #000;
        }
        #left{
            width:200px;
            background:red;
            height: 300px;
            float: left;
            box-sizing: border-box;
        }
        #right{
            width:800px;
            background:green;
            height: 300px;
            float: left;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="left">左側(cè)</div>
        <div id="right">右側(cè)</div>
    </div>
</body>
</html>

其實(shí)就一句話，

overflow: hidden;

先記住就好，等你長大了就明白了。

css float與學(xué)習(xí)騎自行車

說第三個(gè)問題，

css float與學(xué)習(xí)騎自行車

明顯footer位置不對，這是一個(gè)特性，float后面的元素會(huì)自動(dòng)跟隨，并盡量靠上靠左。問題是明顯footer是不愿意跟著右側(cè)元素混的，他應(yīng)該在下面。咋弄？清除浮動(dòng)。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #wrap {
            width: 1000px;
            margin: 0 auto;
            border: 5px solid yellow;
            overflow: hidden;
        }

        div {
            border: 5px solid #000;
        }

        .main {
            border: 0;
        }

        #left {
            width: 200px;
            background: red;
            height: 400px;
            float: left;
            box-sizing: border-box;
        }

        #right {
            width: 800px;
            background: green;
            height: 200px;
            float: left;
            box-sizing: border-box;
        }

        .clearFix:after {
            content: '';
            display: block;
            clear: both;
        }

        .clearFix {
            zoom: 1;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="main clearFix">
            <div id="left">左側(cè)</div>
            <div id="right">右側(cè)</div>
        </div>

        <div id="footer">我是帥氣的footer</div>
    </div>
</body>

</html>

注意，這里在left和right外面包了一層div，然后添加了class

        .clearFix:after {
            content: '';
            display: block;
            clear: both;
        }

        .clearFix {
            zoom: 1;
        }

這里你不會(huì)都沒關(guān)系，先記住會(huì)用就好。記住代碼就像騎自行車，騎得多了自然就知道怎么騎了，熟練了以后再去騎山地車，公路車，入門就會(huì)很快。

目前你已經(jīng)掌握了float的基礎(chǔ)入門，走起吧！

網(wǎng)頁標(biāo)題：cssfloat與學(xué)習(xí)騎自行車
網(wǎng)頁網(wǎng)址：http://bm7419.com/article30/phosso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、ChatGPT、網(wǎng)站設(shè)計(jì)、域名注冊、標(biāo)簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司