BFC之宽度自适应布局篇_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

BFC之宽度自适应布局篇_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:25 AM

说到自适应布局，我们曾在“抛砖引玉之宽度自适应布局”一文中学习过。当时的核心思想主要是利用float+margin的形式。利用块状元素的流体特性，然后计算出float元素的宽度，并赋予到块状元素的相应margin中。但是这么做是有个缺点的，就是我们每次都得知道float元素的宽度，然后赋予到块状元素的margin。

然而，我们在”BFC之浅析篇”中学习到BFC有一特性：BFC的区域不会与外部浮动元素重叠。并且利用了这一特性，实现了两栏自适应布局。我们再来回顾下。

<!DOCTYPE html>     <head>        <title>BFC</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>             .leftDiv {                 width:100px;                 height:100px;                 background:green;                 float:left;             }             .normalDiv {                 height:100px;                 background:pink;                 /*添加overflow:hidden，触发元素BFC*/                 overflow:hidden;             }        </style>    </head>    <body>        <div class="leftDiv"></div>           <div class="normalDiv">        </div>    </body></html>

运行代码，截图为下

可以看见浮动元素（绿色方块）与div.noramDiv元素的确木有发生重叠，而且我也没有加margin哦。

你也可以自己运行下上述代码，伸缩页面宽度，可以发现也的确是自适应滴。

（PS：上面所示的BFC实现两栏自适应的例子，可以和“float实例讲解”对比学习下，效果会更加哦。）

我们上面是利用的overflow:hidden;来触发div.normalDiv的BFC。在“BFC之浅析篇”中，我们学习到要触发元素成为BFC，有如下几种方法：

1、 float属性不为none

2、 position为absolute或fixed

3、 overflow的值不为visible

4、 display的值为table-cell，table-caption，inline-block中的任何一个。

抛开第三点，overflow的值不为visible，其他几种也适合实现BFC自适应布局？

当然不是咯。

首先，针对第一点float，由于float触发元素BFC后，自身float又带有特性，如将元素包裹化了，破坏了块级元素的流体性，所以不能用来自适应布局。

针对第二点position，又由于position将元素脱离文档流比较严重，因此，更加不能用来自适应布局。

针对，第四点中 display:table-cell，当你设置一个比宽度无线大时，它也不会超过它容器的宽度。

啧啧啧！这不就完美了么。那么我们设置它的宽度为很大很大时，也就可以用来自适应布局了嘛。

看看如下代码

<!DOCTYPE html>     <head>        <title>BFC</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>             .leftDiv {                 width:100px;                 height:100px;                 background:green;                 float:left;             }             .normalDiv {                 height:100px;                 background:pink;                 /*添加display:table-cell，且将宽度设置为很大，如9000px*/                 display:table-cell;                 width:9000px;             }        </style>    </head>    <body>        <div class="leftDiv"></div>           <div class="normalDiv"></div>    </body></html>

运行代码后，效果图见上。

ps:自己运行后的体会更深哦，然后伸缩浏览器，哈哈哈，试了就知道，是可以的哦。

针对第四点中的display:table-caption，直接滤过！

针对第四点钟的display:inline-block，由于和float一样具有包裹性，所以滤过。但是，我们曾在"BFC之清除浮动篇&clear"中提到过IE6、7有个hasLayout嘛，在IE6、7中它可是具有流体特性的哦。所以可以解决IE6、7的自适应布局。代码如下

.floatElm {    float: left;}.bftContent {    display: inline-block;}

so，对触发BFC的方法，能用在自适应布局中的方法如下

overflow（hidden/auto）

缺点：

1、 overflow:hidden当内容过多时，带有剪裁功能

2、 overflow:auto当内容过多时，会出现滚动条

display:inline-block

缺点：

只适用于IE6、7

display:table-cell

缺点：

只适用于IE8+和其他浏览器

终上所述，我们可以得到利用BFC实现自适应布局的通用方法如下：

.floatElm {    float:left;}.bfcContent {    display:table-cell;    width:9000px;/*宽度大到屏幕宽度即可*/    /*hack手段，针对IE6、7*/    *display:inline-block;    *width:auto;}

好了，我们利用这个方法来实现实现三栏布局玩玩。代码如下：

<!--    左右宽度为100px，中间自适应--><!DOCTYPE html>     <head>        <title>BFC</title>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <style>            .floatLeft,.floatRight {                width:100px;                height:100px;            }            .floatLeft {                /*左浮动触发BFC*/                float:left;                background:green;            }            .floatRight {                /*右浮动触发BFC*/                float:right;                background:yellow;            }            .bfcContent {                /*table-cell触发BFC*/                display:table-cell;                width:9000px;/*宽度大到屏幕宽度即可*/                /*hack手段，针对IE6、7*/                *display:inline-block;                *width:auto;                height:100px;                background:pink;            }         </style>    </head>    <body>        <div class="floatLeft"></div>        <div class="floatRight"></div>        <div class="bfcContent bfcContentStl"></div>    </body></html>

不信，自己运行代码，拉动浏览器看看啦。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。