Four years front kneel on THE CSS interview, incredible! CSS interview is not the primary front end will kneel.

At the end of the interview, the interviewer suddenly asked me one final question. How to clear float. And of course I’ll show you the most common method very quickly.

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
Copy the code

I thought the interviewer would ask, “What else?” AND I had several ideas in mind. Unexpectedly, the interviewer asked me the principle of this method to clear floating.

The principle! I was confused. It was a common method, and I used it all the time, but I didn’t understand how it worked. The mind is racing.

  • First of all,::afterIs a pseudo-element of the element, after the element;
  • contentIs the content of the pseudo-element, is empty, should just let the pseudo-element not show, whiledisplay:block; height:0Keeping pseudo-elements at zero height should have little to do with clearing floats.
  • In additionvisibility: hiddenIs for the browser to render pseudo-elements but not display them, and should not have much to do with clearing the float.
  • So you’re left withclear: bothI don’t know what that means either, but using the process of elimination, that’s probably the key to getting rid of the float.

So, I answered vaguely, is clear: both this property worked. But the look on the interviewer’s face told me that he was not satisfied with my answer.

Then he asked me to talk briefly about what the BFC is and what it does. I have only heard of KFC, where have heard of BFC, this completely confused. At ordinary times most of the work is in writing JS code, rarely to operate CSS.

He was accepted, but his salary dropped by 2K, short of expectations. It’s a shame.

When you get home, look it up online, summarize it, and share it.

CSS or front-end fundamentals, whether you have years of experience!! Don't think you only ask about CSS in a preliminary front end interview.Copy the code

First, clear the floating principle

Yes, clear:both is really clear floating key, I was right.

Clear is a positioning property in CSS that specifies which side of an element is not allowed to float other elements. Then clear:both specifies that floating elements are not allowed on the left and right sides.

The clear property only works on block-level elements, which is what display:block does in the clear float style.

In addition the visibility: hidden; height: 0; As long as the value of content is null. It doesn’t matter if I write it or not.

So why to clear float, the most common is because the outer container height collapse, the following code to demonstrate.

<style>
.wrap {
    width: 200px;
    border: 1px solid #333;
}
.wrap:after {
    content: '';
    display: block;
    clear: both;
}
.left {
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.right {
    float: left;
    background: red;
    height: 50px;
    width: 100px;
}
</style>
<body>
    <div class='wrap'>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
Copy the code

For clarity, set the content in the.wrap:after style to content: ‘After pseudo-element’, as shown in the figure below.

Wrap :after > < span style = “box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; font-size: 14px! Important; white-space: normal;”

It also supports the height of the parent element of the. Wrap element. This removes the float considerably and solves the problem of collapsing the height of the outer container.

So let’s set the content in the.wrap:after style to content: “and end up looking like this.

The concept and application of BFC

1. Concept of BFC

BFC is Block Formatting Contexts.

Formatting Context is a rendering area of a page that has a set of rendering rules that determine how its children will be positioned and how they relate and interact with other elements. Basically, a container that decides how to render elements.

2. BFC rendering rules

Then the BFC is a container that decides how to render the elements. We need to understand its rendering rules.

  • 1. The internal block-level elements are placed vertically, one after the other.
  • 2. The vertical distance of block-level elements is determined by margin. Margins of two adjacent block-level elements belonging to the same BFC will overlap.
  • 3. For left-to-right formatting, the left edge of each element (block-level elements and inline elements) touches the left edge of the containing block (the opposite is true for right-to-left formatting). This is true even if the elements in the containing block have a float, unless the elements in it regenerate into a BFC.
  • 4. Areas of the BFC do not overlap with floating elements.
  • 5. The BFC is an isolated and independent container. The child elements inside the container and the outside elements do not affect each other.
  • 6. When calculating the height of THE BFC container, the floating element is also involved in the calculation.

3. Detailed explanation of BFC rendering rules

3.1 rule 2

The first of the above rendering rules is easy to understand. Let’s explain the second point with an example.

<body> <div style="width:100px; height:100px; background:red; margin:20px;" ></div> <div style="width:100px; height:100px; background:blue; margin:20px;" ></div> </body>Copy the code

According to the style code, the space between the red and blue blocks should be 40px. But it’s actually 20px. This is the second point of the BFC rendering rule.

Because one of the triggering conditions of BFC is the root element HTML, the red block and the blue block are adjacent block-level elements under the root element HTML container, and their margins will overlap, so the spacing between the red block and the blue block is only 20px.

3.2 three rules

The third rule is a little harder to understand and I’ll explain it in detail. The first step is to understand the meaning of containing blocks.

A containing block is not a complete box. A complete box contains a margin containing block, a border containing block, a padding containing block, and a content containing block.

The inclusion block may be either the Box content inclusion block or the Box padding inclusion block. This depends on the position attribute of the element contained by the contained block.

For example, if an element’s position property is Absolute, the inclusion block is made up of the padding inclusion block of its parent element whose nearest position value is not static.

For example, if the position attribute of an element is static or relative, the containing block is contained by the content of its parent element.

If the position attribute of an element is fixed, the containing block is the viewport.

Then. Elements in the BFC should contact their own containing block, which may or may not be part of the BFC, but not the BFC.

Normal elements are formatted from left to right, so the element’s position property is Absolute and right is 0, or the element’s float property is right, so it is formatted from right to left, and the right edge of the element touches the right edge of the containing block.

Element H triggers the generation of A BFC with two elements, A and B, whose float attribute is left, so the left edge of A touches the left edge of H (which is also the containing block of element A). If the float attribute of element B is also left, the left edge of element B does not touch the left edge of element H. It’s touching the right edge of element A. This case can be explained by the rule “even if the elements in the containing block float, unless the element is regenerated as a BFC.” The element whose float attribute is not None triggers the generation of a BFC, so this case is not inconsistent.

3.3 rules four

This is one of the most important rendering rules in the BFC and can be used to solve many layout problems.

3.4 rule 5

This rule can be used to solve the problem of floating internal elements causing the height of the parent element to collapse.

4. Trigger conditions of BFC

  • The root elementhtml
  • floatThe value is notnone.
  • positionThe value is notstaticorrelative.
  • displayThe value isinline-block,inline-flex,flex, flow-root,table-caption,table-cell.
  • overflowThe value is notvisible.

5. Application of BFC

1. Clear the float

At the beginning of the article, mentioned with clear:both to clear the float, we can also according to the BFC rendering rules point 6 (calculate the height of the BFC container, floating elements are also involved in the calculation) to clear the float, to solve the height collapse problem.

2. Solve the problem of upper and lower margin

<body> <div style="width:100px; height:100px; background:red; margin:20px;" ></div> <div style="width:100px; height:100px; background:blue; margin:20px;" ></div> </body>Copy the code

We use point 2 of BFC rendering rule (margin of two adjacent block-level elements belonging to the same BFC will overlap), so margins of two adjacent block-level elements that do not belong to the same BFC will not overlap.

So we wrap the second div element in a div element and trigger its BFC with overflow:auto. Let’s see if it doesn’t overlap again.

<body> <div style="width:100px; height:100px; background:red; margin:20px;" ></div> <div style="overflow:auto"> <div style="width:100px; height:100px; background:blue; margin:20px;" ></div> </div> </body>Copy the code

3. Realize adaptive two-column layout

The adaptive two-column layout consists of a main content area and a sidebar area, both of which are adaptive in width to the size of the window. There’s a couple of ways to write it.

Here to achieve a use of BFC rendering rules.

<style> .main{ background: red; height:500px; } .sider { float: left; width: 20%; height:300px; background: blue; } </stley> <body> <div class="sider"> <div class="main"> </div> <body>Copy the code

First we need to write the.sider div before the.main div according to rule 1. This.sider div will float over the.main div.

According to rule 4 (BFC areas do not overlap with floating elements), add overflow:auto; Triggers the.main div to generate the BFC.

Iv. Concept and application of IFC

1. Concept of IFC

The full name of IFC is Inline Formatting Context.

2, IFC generation conditions

The forming condition of IFC is very simple. Block-level elements only contain inline-level elements. It should be noted that when block-level elements are inserted into IFC, two anonymous blocks will be generated to separate the parent elements, resulting in two IFCs.

3. IFC rendering rules

  • The child elements are arranged horizontally and vertically from the top of the element.
  • Only the horizontal style space ([padding, border, margin]) is calculated for child elements, and the vertical style space ([padding, border, margin]) is not.
  • In the vertical direction, the children are aligned differently (vertical-align)
  • A rectangular area that can contain all the boxes on a line is called the line box of that line. The width of a row box is determined by the containing box and the float within it.
  • The “line box” in IFC is usually close to the left and right sides of its containing block, but float elements are arranged first.
  • The height of the line box in the IFC is determined by the row height calculation rule of the CSS. Multiple line boxes under the same IFC may have different heights.
  • When the total width of inline-level boxes is less than the line box that contains them, the horizontal rendering rule is determined by the value of the text-align property.
  • When an inline box exceeds the width of its parent element, it is split into boxes that are spread across line boxes. If the child element is not set to a forced newline, the “inline box” will not be split and will overflow the parent element.

4. Application of IFC

  • Horizontal center: When a block is to be horizontally centered in the environment, setting it to inline-block produces an IFC on the outer layer. Text-align makes it horizontally centered.
  • Vertical-align :middle: Create an IFC with one of the elements to open the parent and set it to vertical-align:middle. Other elements in the row can be vertically centered below the parent.

Five, FFC concept and application

1. Concept of FFC

FFC is Flex Formatting Contexts, elastic box model.

2, FFC generation conditions

The parent element sets display:flex or ‘display:inline-flex

3, FFC rendering rules’

You can see Ruan Yifeng’s Flex layout tutorial: Syntax, which is very detailed.

One thing to watch out for. When FFC is generated, the float, clear, and vertical-align attributes of its children become invalid.

4. Application of FFC

1, automatically spread the page height, the bottom bar always appears at the bottom of the page

<style>
.wrap{
    display:flex;
    padding:0;
    margin:0;
    min-height:100vh;
    flex-direction:column;
}
.main{
    flex-grow:1;
}
</style>
<body class="wrap">
    <header style="line-height:50px;background:red;color:#fff;text-align:center">头部</header>
    <main class="main">内容</main>
    <footer style="line-height:50px;background:#eeeeee;color:#333;text-align:center">底栏</footer>
</body>
Copy the code

2. Classic Grail layout

<style> .wrap { display: flex; padding: 0; margin: 0; min-height: 100vh; flex-direction: column; } header, footer { flex: 0 0 50px; } .content { display: flex; flex: 1 } .main { flex: 1; } .nav, .ads{ flex: 0 0 100px; background:green; } .nav{ order:-1; background:yellow; } </style> <body class="wrap"> <header style="line-height:50px; background:red; color:#fff; Text-align :center"> </header> <div class="content"> <main class="main"> Content area </main> <nav class="nav"> side navigation </nav> <aside Class =" aside "> sidebar </aside> </div> < span style=" word-break: break-all; background:#eeeeee; color:#333; Text-align :center"> </footer> </body>Copy the code

subsequent

I put the comment area we discuss the question sort out, put in this article four years in front of the CSS interview kneel the follow-up, if feel good, point a like, let more people see, thank you.