Web front-end articles: css float

Floating is a very important page layout in a property. So 浮动this property outset was originally designed for web pages 文字环绕效果.
Text Wrapping phenomenon

<!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. Floating properties

css float represented by style sheets, it has

<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. floating phenomenon

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

3. Floating destructive

After floating effect show:
Thus, after floating out of the box because the standard document stream, the height of which can not afford to support the parent box, resulting in the parent case 高度塌陷. If the page appears in this issue, we will lead the entire page layout disorder. We must go to solve this problem parent box height collapse.
So how to solve the problem caused by floating to the web page ? Click to receive free information and courses

4. Clear floating manner

We know that floating destructive, it can make the parent box height collapse, resulting in page disorders. Then the css layout There are four solutions for floating:

1. Set the parent box fixed height

Parent box to set a fixed height, the disadvantage is not flexible, the latter difficult to maintain. Applications navigation bar.

2. interior law

Behind the floating element plus an empty block element (usually a div), and the element is disposed clear: both properties.
clear property, literally means cleared, then both, it is to remove the influence of floating elements on both sides of me. The following example

<!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>

Problems: Redundancy is too long.

3. Clear pseudo-element method (recommended)

Pseudo-element selector is simple. Like pseudo-classes, pseudo-elements are added so that the selectors, but does not describe the special status of certain parts of them allows you to set the style element. Introduced here only one.
Click to receive free information and courses

grammar:

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

Example:

 ...
 .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:hidden

When a content element of the box is too large to accommodate overflow CSS attribute defined what to do. It is shorthand property overflow-x and the overflow-y

hidden

<!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>
#注意：此处内容会被修建，并且其余内容不可见

overflow: hidden || auto | after scroll property, it will form a BFC region, we call it as a block-level formatting context. BFC is just a rule. It is important float position. Clear float and float position will only apply to the same elements of BFC.
Floating will not affect the layout of other elements of the BFC, and only Clear Clear float floating BFC same elements in front of it.

<!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 in-depth understanding of BFC:

Learn BFC
Click to receive free information and courses
(1) B: BOX namely basic elements box, page. Into inline, block, and three types of inline-block BOX

(2) FC: Formatting Context is a concept in the W3C specifications. It is a rendering of the page area, and a set of rendering rules, which determines how it will be positioned child elements, and the relationships and interactions and other elements.

(3) Common Formatting Context There Block fomatting context (referred to BFC) and Inline formatting context (referred IFC)

1.BFC layout:

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

2. Which of those elements generates BFC

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

3.display property

How to display attribute of the element is displayed

Here Insert Picture Description