ブロックのフォーマットコンテキスト、フローティングおよび絶対配置の仕組みの詳細な説明_html/css_WEB-ITnose

CSS ビジュアル フォーマット モデルには、位置決めスキームという非常に重要な概念があります。 CSS2.1 では、要素のレイアウトを制御するために配置スキームが使用されます。通常のフロー、フローティング、および絶対配置の 3 つの配置スキームがあります。

通常のフロー: 要素は、位置に従って上から下にレイアウトされ、インラインになります。要素は、行がいっぱいになるまで水平に配置され、折り返され、指定されていない限り、すべての要素はデフォルトで通常のフロー配置になります。

フローティング: フローティング レイアウトでは、要素は最初に通常のフロー位置に従って表示され、次にフローティング方向に従って可能な限り左または右にオフセットされます。その効果はテキストの折り返しに似ています。

絶対配置: 要素は通常のフローから切り離されるため、絶対配置された要素は (float とは異なり) 兄弟要素に影響を与えません。要素の特定の位置は座標位置によって決まります。

BFC は通常のストリームであるため、兄弟要素には影響しません。

パート 1: BFC の仕組みの詳細な説明

1. BFC (ブロックレベルの書式設定コンテキスト)

BFC は W3C CSS2.1 仕様の概念であり、要素がコンテンツをどのように配置するかを決定します。他の要素との関係と相互作用。現在、IE6 ～ 7 を除くすべてのブラウザが BFC をサポートしています。 CSS3 では、BFC はフロー ルートと呼ばれます。

通常のコンテナと比較して、BFC 要素は分離された独立したコンテナとみなすことができ、内部要素は外部要素のレイアウトに影響を与えません。

2. BFC を形成する方法

次の条件のいずれかを満たす要素は BFC を形成できます:

1. 浮動要素、none 以外の float 値

2. 絶対配置要素、位置: Absolute/fixed

3.display は inline-block、table-cells、table-captions のいずれかです

4.overflow は visivle (hidden、auto、scroll) 以外の値です

display:table 自体は BFC を生成しません、ただし、匿名ボックスが生成され、display:table-cell を含むボックスは BFC を生成します。

注: BFC は要素ではなく、要素の一部の属性です。したがって、上記の要素は BFC を生成しますが、それ自体は BFC ではありません。

3. BFC の役割

全体として、BFC の役割は、次の 3 つの特定の形式を持つコンテナーを分離することです。 BFC をサポートしていないため、 hasLayout を開始する必要があります クローズドフロート

2.BFC は、浮動要素によってカバーされる要素を整理できます

浮動要素のブロックレベルの兄弟要素は、浮動要素の位置を無視し、行を埋めようとします、浮動要素によって覆われ、BFC を形成すると組織がカバーされるようになります。

<div style="border:1px solid #00F;overflow:hidden;width:300px;">    <div style="float:left;background:#939;">我的父元素是 BFC</div></div> <div style="line-height:3em;">----------我是华丽分割线-----------</div><div style="border:1px solid gray;width:300px;">    <div style="float:left;background:#3C6;">我的父元素不是 BFC</div></div>

3. BFC は親要素と子要素のマージンが崩れるのを防ぐことができます

2 つのブロック レベルの要素が隣接しており、同じブロック レベルの書式設定コンテキスト内にある場合に限り、それらの間の垂直方向のマージンが崩れます。つまり、2 つのブロックレベル要素が隣接している場合でも、それらが同じ BFC 内にない場合、それらのマージンは崩れません。

<div style="float:left;width:150px;height:50px;background:#FF0;">    我是浮动元素</div><div style="width:200px;height:80px;background:#30F;color:#fff;">    我是非浮动元素，并且没有创建 BFC</div><div style="line-height:3em;">----------我是华丽分割线-----------</div><div style="float:left;width:150px;height:50px;background:#FF0;">    我是浮动元素</div> <div style="width:200px;height:80px;background:#30F;color:#fff;display:inline-block;">    我是非浮动元素，创建了 BFC</div>

4. BFC と hasLayout

IE6-7 は BFC をサポートしていないため、プライベート属性 hasLayout を使用します。パフォーマンスの点では、hasLayout は BFC と似ています。また、hasLayout をトリガーする条件は、要素にzoom:1 を設定する必要があります。要素の比率。値 1 は要素の実際のサイズが使用されることを意味し、要素に他の影響を与えることなく hasLayout をトリガーできます。これは比較的便利です。

パート 2: float と clear float の仕組みの詳細な説明

1. float とは

CSS の float 属性は、印刷レイアウトでテキストに囲まれた画像のようなもので、float 要素が削除されます。フローは削除されましたが、依然として通常のフローの一部であり、フロートはその前の最後のブロックレベル要素の直後に表示されます。ただし、フロートは絶対配置に似ています。

float として宣言された要素はすべて、自動的に「ブロックレベル要素」として設定されます。つまり、宣言された幅と高さの属性を持つことができます。幅が指定されていないフロートは、フロートのコンテンツの幅に合わせてストレッチラップする必要があります。たとえば、内部に画像を含むフロートは画像と同じ幅になり、テキストを含むフロートはテキストの最長行と同じ幅になります。フロート内。

2. Float の欠陥と削除

要素が float に設定されている場合、よくある欠陥は、兄弟要素の位置に影響を及ぼし、親要素の高さが崩れることです。 1. 兄弟要素の位置に影響します。ブロックレベルの要素は、float 要素を無視し、可能な限り float 要素と同じ行に配置され、その結果、inline 要素は float 要素を囲みます。できるだけ。

2. 高さの崩壊: 浮動要素が通常の流れから切り離されます。つまり、この浮動要素の存在により、それを含む親要素が自動的に持ち上げられなくなり、崩壊が発生します。 クリアの原則: クリアは、要素が前のフローティング要素 (CSS2.1) の下に配置されるように、要素に十分な空白スペースを追加します。これは、要素を埋めるために要素のマージンを増やすのと同じ効果があります。行と強制改行は同じです (CSS1、CSS2)。

  clear可以清除对于兄弟元素的影响，但不能解决塌陷的问题，因此需要更高级的清除浮动??闭合浮动。

1. 空div方法

<div class="box">    <div class="main left">我设置了左浮动 float: left</div>    <div style="clear: both;"></div>    <div class="aside">我是页脚，我的上面添加了一个设置了 clear: both 的空 div</div></div>

  空div很方便，但是加入了没有含义的div，与结构与表现分离的原则相违背。

2. overflow方法

  在浮动元素的父元素上设置overflow的值为hidden或auto，可以形成BFC，使闭合浮动。

<div class="box" style="overflow: hidden; *zoom: 1;">    <div class="main left">我设置了左浮动 float: left</div>    <div class="aside left">我是页脚，但是我也设置了左浮动。</div></div>

  overflow相对空div更方便，但是当元素内包含超出父元素边界的子元素时，会覆盖掉有用的子元素，或是产生多余的滚动条。

3. :after伪元素方法

<style>    .clearfix {/* 触发 hasLayout */ zoom: 1; }    .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }</style><div class="box clearfix">    <div class="main left">我设置了左浮动 float: left</div>    <div class="aside left">我是页脚，但是我也设置了左浮动。</div></div>

 结合:after伪元素和IEhack，可以完美兼容主流各大浏览器。

清除浮动方法的本质：通过上面例子，可发现清除浮动方法可分为两类：利用clear方法和触发BFC方法

第三部分：绝对定位的工作原理详解

  元素的绝对定位是将该元素从普通流拖出，使用top,left,bottom,right等属性相对于最接近的一个父级参照物进行定位。其中父级参照物为相对于其最接近的一个有定位设置(relative,absolute,fix)的父级元素，若父级元素没有设置定位属性，则依据body元素作为参照物定位。

  绝对定位可层叠，层叠顺序通过z-index属性控制。

一、使用left和top属性的绝对定位

层级关系为：

<div ??????????? position:relative; 不是最近的祖先定位元素，不是参照物<div?????????-没有设置为定位元素，不是参照物<div???????- position:relative 参照物<div box1<div box2 ???position:absolute; top:50px; left:120px;<div box3

为改变参照物（橘色框）后的效果
层级关系为：

<div ??????????? position:relative;最近的祖先定位元素，参照物<div?????????-没有设置为定位元素，不是参照物<div???????-没有设置为定位元素，不是参照物<div box1<div box2 ???position:absolute; top:50px; left:120px;<div box3

参照物为最顶级的元素情况
层级关系为：

<div ???????????没有设置为定位元素，不是参照物<div?????????-没有设置为定位元素，不是参照物<div???????-没有设置为定位元素，不是参照物<div box1<div box2 ???position:absolute; top:50px; left:120px;<div box3

二、使用margin属性的绝对定位

此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。  
层级关系为：

<div ??????????? position:relative; 不是参照物<div?????????-没有设置为定位元素，不是参照物<div???????-没有设置为定位元素，不是参照物<div box1<div box2 ???position:absolute; margin-top:50px; margin-left:120px;<div box3

IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距
层级关系为：

<div ??????????? position:relative; 不是参照物<div?????????-没有设置为定位元素，不是参照物<div???????-没有设置为定位元素，不是参照物<div box1<div box2 ???position:absolute; margin-top:50px; margin-left:60px;<div box3