cssfloat_html/css_WEB-ITnose

1. フローティングの導入

歴史:

フローティング属性は元々、「テキストの折り返し」効果を実現するために作成されました。これにより、テキストが Web ページ上の画像の周りを回り込み、Word で「グラフィックとテキストの混合」を実現できます。

配置方法:

フローティングにより、要素は通常の流れから離れて、要素が含まれているコンテナーの端に当たるまで [テスト後にパディングに当たると停止] するか、当たるまで親コンテナーの左側または右側に移動できます。その他の浮遊要素。テキスト要素とインライン要素はフロート要素の周囲に回り込みます。

注:

1. コンテナに接触するエッジとは、コンテナのパディング内側エッジを指します。

検証例:

<style>.container{    border: 1px solid green;    padding: 30px;    background-color: green;/*将背景裁剪到内容框，方便看浮动元素效果*/    background-clip: content-box;}.fl{    float: left;}</style><div class="container">    文字会环绕在图片周围文字会环绕在图片周围文字会环绕在图片周围文字会环绕在图片周围    <img class="fl" src="img/wb.jpg"></div>

2. フローティング要素は通常のフローから外れています。つまり、次の要素はレイアウト中に存在しないかのように動作します (テキストはまだ存在しているかのように動作します) 、それを囲んでいます)、しかし、それはまだ DOM ツリー内にあります。

3. js の element.style で要素を float に設定する場合、float は js のキーワードであるため、cssFloat を使用する必要があります。 [StyleFloat は IE8 以下のブラウザで使用されます]

は次のとおりです:

<style>#father{    border:1px solid red;}#test{　　background-color: green;　　/*float: left;*/    }</style><div id="father"><span id="test">span内容</span></div><script type="text/javascript">    var oSpan=document.getElementById("test");    oSpan.style["cssFloat" in oSpan.style? "cssFloat" : "styleFloat"]="left";</script>

フローティング効果: ラッピングと破壊性。以下に 1 つずつ紹介します。

2. ラッピング

ラッピング: この言葉は他の人がまとめたものですが、個人的にはちょうどよくまとめられていると思います。

ラッピングとは、要素のサイズがコンテンツにぴったり合うことを意味します。

ラッピング プロパティを持つその他の属性:

display:inline-block/table-cell/...

position:absolute/fixed/sticky

overflow:hidden/scroll

1. ラッピングの例を通してフローティングを見てみましょう。

例:

<style>.container{    border: 1px solid green;    padding: 30px;    background-color: green;    background-clip: content-box;/*将背景裁剪到内容框，方便看浮动元素效果*/}.fl{    float: left;}</style><div class="container fl">内容</div>

2. ラッピングの原理

float がラッピング効果を生み出す理由は、 float 属性が要素の表示属性の最終計算値を変更するためです。

float設定前の表示属性??》float設定後の表示属性の計算値

inline??》block

inline-block??》block

inline-table??》table

table-row ? ?》ブロック

テーブル行グループ??》ブロック

テーブル列??》ブロック

テーブル列グループ??》ブロック

テーブルキャプション??》ブロック

テーブルヘッダ- group ??》block

table-footer-group??》blcok

flex??》flex

inline-flex??》inline-flex [inline-flex は chrome でテストされ、表示: float の後に flex]

その他??》変更なし

テスト後、inline-flexの表示計算値がchromeでフローティングされた後にflexに変更されただけで、他はすべて同じでした。興味のある友達は自分でテストしてみることができます。

ここでは、非常に簡単なテスト方法を示します。たとえば、inline-flex をテストするには、任意のラベルを選択できます。ここでは、span ラベルを使用し、表示属性を inline-flex に設定し、float:left を設定します。以下に示すように、Chrome コンソールのスタイル オプションで、表示属性が inline-flex であることを確認し、計算オプションに切り替えて表示属性が flex であることを確認します。他の値のテストは、コンソールで直接編集および表示できます。

<style>.test{background-color: green;display:inline-flex;float: left;    }</style><span class="test">span内容</span>

float のラッピング プロパティを使用して、親コンテナの適応的な内部要素幅を実現できます。

3. 破壊性

ここでの破壊性とは、要素が浮いた後、親要素が高度に崩壊する可能性があることを意味します。

その他の破壊的属性:

display:none

position:absolute/fixed/sticky

Floating 破壊原理:

Floating 要素はドキュメントの通常のフローから削除されるため、親要素はもちろんそのまま残ります通常のフローでは、フローティング要素によって親要素を展開することはできません。

4. フロートのクリア

1. クリア属性

クリア属性は、要素のどの側に他のフローティング要素を含めることができないかを指定します。

値:

left: 要素の左側に浮動要素は許可されません

right: 要素の右側に浮動要素が許可されません

both: 左側と右側に浮動要素は許可されません要素の側面

none: デフォルト値、フローティング要素が両側に表示されるようにします

特定の原則: 要素の上マージンの上に空きスペースを追加します。たとえば、左側のフロートをクリアすると、要素の上マージンが作成されます。左側のフローティング要素の下マージンのすぐ下。

float をクリアするには主に 2 つの方法があります

クリアを設定する: 両方とも兄弟要素の場合

親要素は BFC (IE8+) または haslayout (IE6/IE7) を生成します

以下の詳細な分析。

2. 方法 1: 兄弟要素に clear:both を設定する

clear:both メソッドには以下も含まれます。

HTML レベルで一般的に使用されるメソッド

空の div 要素にクリアを設定します: Both

br タグの Clear 属性

例:

<style>.wrap{    background-color: green;}.fl{    float: left;}</style><div class="wrap"><img class="fl" src="img/wb.jpg" /><div style=" clear:both;margin-bottom:50px;">兄弟元素设置clear:both</div></div><p style="margin-top: 50px;">兄弟元素设置clear:both来清除浮动会有margin重叠现象</p>

これを使用しますこのメソッドは浮動小数点をクリアします。注意すべき点は、クリアされる要素が浮動小数点要素を除く他の要素と同じ BFC 内にあるためです。

コードレベルの問題:

用标签来实现样式效果，不符合结构表现分离原则。标签复用变难。

标签没有任何语义

这样写代码不专业

将来有其他清除浮动的方法，你必须回头删掉所以分散在html页面中的
标签

b、父元素添加 after 伪元素

因为上面方法的种种弊端，更推荐使用这种父元素添加after伪元素清除浮动的方法。

上面方法是在html层面写的代码，而after伪元素是在css层面写的代码，虽然代码都不多，但站在结构和表现分离的角度看两种方式还是有差的。

代码如下：after在父元素底部生成一个具有clear:both 声明的伪元素来清除浮动。

.clearfix::before,.clearfix::after{    content: ".";    display: block;    height: 0;    overflow: hidden;}.clearfix:after{    clear: both;}.clearfix {    zoom: 1; /* IE < 8 */}

这种方法原理：

通过父元素的::after伪元素来生成浮动元素的兄弟元素，然后兄弟元素使用clear:both方法。

知道这点很重要，举个反例子来说明一下：

<style>.wrap{    background-color: green;}.fl{    float: left;}.clearfix::before,.clearfix::after{    content: ".";    display: block;    height: 0;    overflow: hidden;}.clearfix:after{    clear: both;}</style><div class="wrap clearfix"><img class="fl" src="img/wb.jpg" /><div >    父元素的::after伪元素并不是浮动元素【在这里是图片】的相邻的兄弟元素，就达不到清除浮动的效果父元素的::after伪元素并不是浮动元素【在这里是图片】的相邻的兄弟元素，就达不到清除浮动的效果父元素的::after伪元素并不是浮动元素【在这里是图片】的相邻的兄弟元素，就达不到清除浮动的效果</div></div>

因为父元素生成的并不是浮动元素相邻的兄弟元素，所以使用clear:both无效，使用时必须注意。

c、一个更简洁的版本

支持浏览器： Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the *    contenteditable attribute is included anywhere else in the document. *    Otherwise it causes space to appear at the top and bottom of elements *    that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using *    `:before` to contain the top-margins of child elements. */.cf:before,.cf:after {    content: " ";    display: table; }.cf:after {    clear: both;}/* IE < 8 *//** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */.cf {    *zoom: 1;}

了解更多可参考micro-clearfix-hack

zoom是为了兼容IE6,7;:before是为了阻止margin重叠，如果只清除浮动，可用：

.container:after {  content:"";  display:table;  clear:both;}

3、补充知识：BFC

BFC:块级格式化上下文【在css3中叫Flow Root】是一个独立布局环境，相邻盒子margin垂直方向会重叠。

什么样的元素会为其内容生成一个BFC呢？

浮动元素，即float:left|right

绝对定位元素，即position:absolute|fixed

块容器【block containers】(比如inline-blocks，table-cells和table-captions)，这些块容器有个特征就是它们不是块级盒子【block boxes】。即display:table-cell|table-caption|inline-block

设置了除visible外的overflow值的块盒子【blok boxes】，即overflow:hidden|scroll|auto

BFC特性：

创建了BFC的元素中，子浮动元素也会参与高度计算

与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖

创建了BFC的元素不会与它们的子元素margin重叠

4、方法二：父元素生成BFC（IE8+） 或haslayout(IE6/IE7)

正是因为BFC特性中，创建了BFC的元素中，子浮动元素也会参与高度计算，所以可来清除浮动。

常用方法如下：

浮动父元素（触发 BFC）

overflow: hidden （触发 BFC）

display: table或table-cells;（触发 BFC，display:table 本身并不产生 BFC，而是由它产生匿名框，匿名框中包含 "display:table-cell" 的框会产 BFC）

举例：父元素使用overflow:hidden生成一个BFC来清除浮动。

<style>.wrap{    background-color: green;    overflow: hidden;}.fl{    float: left;}</style><div class="wrap"><img class="fl" src="img/wb.jpg" /><div style=" margin-bottom:50px;">浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容浮动元素的兄弟元素的内容</div></div><p style="margin-top: 50px;">浮动元素父元素的兄弟元素内容</p>

overflow: hidden;使得包含图片的div生成BFC，所以里面内容元素与外面包含文字的div的margin不会重叠，如上图。

两种清除浮动方法区别：clear:both可以发生margin重叠，BFC隔离不会有margin重叠。

BFC缺点：

1、不能应用于所有场合，因为不可能所有元素都绝对定位或者不可能所有元素都浮动。

2、现代浏览器不认识zoom1。

5、清除浮动方法总结

每种清除浮动的方法都有弊端，权衡后推荐用法：

.clearfix:after{content:"";display:block;height:0;overflow:hidden;clear:both;}/*IE6和IE7*/.clearfix{*zoom:1;}

或者用：

.clearfix:after{content:"";display:table;clear:both;}/*IE6和IE7*/.clearfix{*zoom:1;}

Note:

.clearfix类只应该用在包含浮动元素的父元素上。【如果不懂这句话再把上文看一遍】

五、浮动布局

1、普通固定布局

通常用的浮动布局一般是：固定尺寸+浮动。

举例：两栏布局

<style type="text/css">  body{    width: 600px;  }  .left{    width: 150px; float: left;   }.right { width: 450px; float: right; }  </style><body>  <div class="left">    <img src="img/wb.jpg"/>  </div>  <div class="right">    文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容  </div></body>

问题：

容错性差：容器尺寸变了，就得改代码。

复用性不好：尺寸固定，模块在另外尺寸容器中不能重用。

2、推荐布局

a、左侧尺寸固定右侧自适应的流体布局

举例：在上面代码基础上修改样式为

<style type="text/css">  .left{    width: 150px; float: left;   }  /*流体布局*/.right { margin-left: 150px;}  </style>

重点是使用margin-left，且不要定宽。这样好处是容器尺寸变化右侧可自适应。

b、右侧尺寸固定左侧自适应的流体布局

改变DOM位置的流体布局写法

写代码时顺序为先右后左，这样就可以设置右栏右浮动，左栏设置margin-right。

<style type="text/css">.right{float: right;width: 150px;}.left{margin-right: 150px;}  </style></head><body><div  class="right"><img  src="img/wb.jpg"></div><div class="left">文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</div></body>

不改变DOM位置的流体布局写法【左右栏都左浮动】

写代码时顺序不变，左右栏都浮动，通过margin调整位置。

<style type="text/css">.wrap {  width: 100%;  float: left;}.left {  margin-right: 150px;}.right {  width: 150px;  float: left;  margin-left: -150px;}  </style><body><div class="wrap">    <div class="left">    文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容    </div></div><div  class="right">    <img  src="img/wb.jpg"></div></body>

效果同上。

大前端就是用的这种布局方法。

c、两栏都自适应的布局

原理是左栏浮动，右两栏生成BFC，根据BFC特性与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖。

<style type="text/css">.left {  float: left;}.right{   display: table-cell; }  </style><body> <div class="left">    <img src="img/wb.jpg"/>  </div>  <div class="right">    文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容  </div></body>

六、float布局和inline-block布局对比

浮动和inline-block都能让元素排成一排，那么应该如何抉择？下面对比一下。

文档流：浮动元素脱离正常流，让文字环绕。inline-block仍然在正常流中。

水平位置：不能通过给父元素设置text-align:center让浮动元素无法水平居中【因为脱离文档流】，而inline-block可以。

垂直对齐：浮动元素紧贴顶部，inline-block默认基线对齐，可通过vertical-align调整。

空白：浮动忽略空白元素彼此紧靠，inline-block保留空白。

举例：浮动布局可以去掉元素之间的空格，而inline-block会保留空格。

<style>button {    margin: 0;    float: left;}p {    clear: both;}</style></head><body>    <button>按钮1</button>    <button>按钮2</button>    <button>按钮3</button>    <button>按钮4</button></body>

分析：button默认display:inline-block；可见他们之间有空格的距离。加了float:left后各个button元素之间空格消失。

总结一下：处理文字环绕自然是用浮动，处理图片列表垂直对齐或者横向导航可以选择inline-block。