Webフロントエンドの記事：CSSフロート

フローティングは、プロパティで非常に重要なページレイアウトです。だから、浮动このプロパティの発端は、もともとWebページのために設計されました文字环绕效果。
テキストの折り返し現象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向外边距</title>
    <style type="text/css">
        html{
            font-size:24px;
        }
        img{
            width:20rem;
        }
        #sep{
            float: left;
        }
        p{
            border:1px solid red;
            text-indent:2rem;
            font-size:1rem;
        }
    </style>
</head>
<body>
    <div id="sep">
        <img src="https://i1.mifile.cn/a4/xmad_15590487108559_JOpcA.jpg" alt="加载失败" title="王源">
    </div>
    <p>
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
        我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
    </p>
</body>
</html>

1.浮動プロパティ

スタイルシートに代表されるCSSフロートは、それが持っています

<meta charset="UTF-8"/>
    <title>浮动属性用法</title>
    <style type="text/css">
        .left{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #fff;
            /*左浮动*/
             float:left;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: green;
            color: #fff;
            /*右浮动*/
             float:right;
        }
    </style>
    <div class="left">左边的盒子</div>
    <div class="right">右边的盒子</div>

2.浮き現象

我们之前说浮动的设计初衷是为了做”文字环绕效果“。那么我们就来看一下如果对盒子设置了浮动，会产生什么现象？
1浮动的元素脱离了标准文档流，即脱标
2浮动的元素互相贴靠
3浮动的元素会产生”字围“效果
4浮动元素有收缩效果

3.破壊的浮動

浮遊効果のショーの後に：
したがって、標準文書ストリームので、ボックスの外に浮遊した後、高さは、親場合に得られた、親ボックスをサポートする余裕がありません高度塌陷。ページがこの問題に表示された場合、我々は、ページ全体のレイアウト障害をリードします。私たちは、この問題の親ボックスの高さの崩壊を解決するために行かなければなりません。
それでは、どのように解決するWebページへの浮動によって引き起こされる問題は？無料情報やコースを受け取るにはクリック

4.クリア浮いた状態

私たちは破壊的浮動、それはページ障害が生じ、親ボックスの高さの崩壊を作ることができることを知っています。そして、CSSレイアウト浮動ための4つのソリューションがあります。

1.親ボックスの固定高さを設定します。

親ボックスが一定の高さを設定するために、不利な点は、維持するのが困難後者は、柔軟ではありません。アプリケーションのナビゲーションバー。

2.内部の法則

フローティング要素プラス空のブロック要素（通常はDIV）の後ろに、要素が明らかに配置されている：両方の特性を。
明確な特性は、文字通りクリアし、その後、両方の、それは私の両側に浮動要素の影響を除去することであることを意味します。次の例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 800px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .child1{
            width: 200px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .child2{
            width: 300px;
            height: 200px;
            background-color: green;
            float: right;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
<!--内墙法：给最后一个浮动元素的
后面添加一个空的块级标签，并且设
置该标签的属性为clear:both;-->
    <div class="father">
        <div class="child1">A盒子</div>
        <div class="child2">B盒子</div>
        <div class="clear"></div>

    </div>

問題：冗長性は長すぎます。

3. [擬似要素法（推奨）

擬似要素セレクタは単純です。擬似クラスのようなセレクタように、擬似要素が追加されますが、それらの特定の部分の特殊な状況は、あなたがスタイル要素を設定することができます説明していません。ここに一つだけ紹介しました。
無料情報やコースを受け取るにはクリック

構文：

p::after{
    /*p::after{}一定要有content。表示在p元素内部的最后面的添加内容*/
    content:'...'
}

例：

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

    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="child1">盒子A</div>
        <div class="child2">盒子B</div>

    </div>

4.overflow：隠されました

ボックスのコンテンツ要素が対応するために、多すぎるとオーバーフローCSS属性が何をするかを定義しました。これは簡略プロパティオーバーフロー-xとオーバーフロー-Yであり

隠されました

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            overflow: hidden;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: hidden;

        }
    </style>
</head>
<body>
    <div class="box">
    此处有一篇1万字文章
    </div>
</body>
</html>
#注意：此处内容会被修建，并且其余内容不可见

オーバーフロー：自動||隠さ| scrollプロパティの後に、それは我々がブロックレベルフォーマットのコンテキストとしてそれを呼び出す、BFC領域を形成します。BFCは単なるルールです。これは重要なフロート位置です。クリアフロートとフロート位置はBFCの同じ要素に適用されます。
フローティングは、BFCの他の要素のレイアウトには影響しません、とだけクリアをクリアフロートは、その前にBFC同じ要素を浮動します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 800px;
            margin: 100px auto;
            border: 1px solid #000;
            /*一旦设置一个Box盒子 除了overflow：visible；
            它会形成一个BFC,BFC它有布局规则： 它会让内部浮动元素计算高度*/
            overflow: hidden;
        }
        .child1{
            width: 200px;
            height: 400px;
            background-color: red;
            float: left;
        }
        .child2{
            width: 300px;
            height: 200px;
            background-color: green;
            /*float: right;*/
            /*overflow: hidden;*/
            float: left;
        }


    </style>
</head>
<body>

    <div class="father ">
        <div class="child1">A盒子</div>
        <div class="child2">B盒子</div>
    </div>



</body>
</html>

＃5 BFCの深い理解：

BFCの学び
の無料情報やコース受け取るためにクリックを
BOXつまり基本要素ボックス、ページ：（1）Bを。インライン、ブロック、インラインブロックBOXの三つのタイプに

（2）FC：フォーマットコンテキストは、W3C仕様の概念です。これは、ページ領域のレンダリング、そしてそれは、子要素、および関係や相互作用および他の要素を配置する方法を決定し、レンダリングルールのセットです。

（3）共通の書式コンテキストがブロックfomattingコンテキスト（BFCと呼ばれる）とインライン書式コンテキスト（IFCをいいます。）

1.BFCレイアウト：

1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float 元素重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算

BFCを生成し、それらの要素の2

1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block
5.overflow不为visible

3.displayプロパティ

表示されている要素の属性を表示する方法

ここに画像を挿入説明