Front-end Interview CSS Series-Clear Floating

Interview question and answer

Q: How to clear floats?

Answer: If we know the location of the floating element, we can use clear:both in the element style to clear the floating of the adjacent label of the element. In addition, we have three techniques to clear the float: 1. Add overflow attribute to the parent element; 2. Add an empty block-level element before the end tag of the parent element of the floating element, and then add clear:both CSS to the block-level element Attributes. 3. Use pseudo-element: after, add a clearfix style class to the parent element, and declare to clearfix

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

Style to clear the float.

What is Float

float is a CSS positioning property. Before we understand float property and the original intention of the design, let's take a look at the print design. In the layout of the print design, you can put pictures on the page so that the text surrounds them as needed. This method is usually called "text wrapping", the following is an example.

In the page layout project, the "text-wrapped" box Box can control whether the wrapped text "wraps" it or ignores it. Ignore the text wrapping and let the text surround the picture as if the picture does not exist. The web page design is very similar to it.

In Web page design, float attribute are like images in a print design layout, with text flowing around the image. The HTML element with the CSS float attribute is still part of the normal flow of the web page. This is obviously different from the page elements defined using the absolute positioning position attribute. The absolutely positioned page elements are removed from the normal flow of the web page. The absolutely positioned page elements will not affect the layout of other elements, and other elements will not affect them, regardless of the application. Whether the label is touching.

The element with the float float attribute is usually like the following:

#footer {
    float: right;
}

The float float attribute has four valid values. left and right indicate the direction of the floating element. None (default value) means that the element does not float, and Inherit means inherit the float value of the parent element.

What can float

In addition to the simple example of wrapping text around an image, floats can also be used to create entire web layouts.

Floating can also help layout in smaller instances. Take this small area of the web page as an example. If we use float for our small avatar, when the image changes size, the text in the box will rearrange to fit:

The same layout can also be achieved by setting relative positioning on the parent element and absolute positioning on the child element. However, in this way, the text will not be affected by the avatar and cannot be reflowed when the size is changed.

The common usage of float has the following ways:

1. Text wrapping _ case
2. _ 160d3538744aa1 case 160d3538744aa3

3. Multi-column layout

   1. Two-column layout _ case
   2. Three-column layout _ case

Clear float

The float float attribute has a sister attribute clear ; the element with the clear attribute set will not move up to the vicinity of the float as expected by the float, and will start a new line down.

As shown in the figure below, when Main Content and Sidebar set to float, there are no clear properties.

In the example above, Sidebar to the right, and the height is shorter than Main Content . If there is enough space, Footer will be adjusted upwards below the floating element. In order to solve this problem, you can set the clear footer clear the float on both sides and make sure it runs below the two columns.

#footer{
    clear:both;
}

Clear clear attribute has five values: both , left , right , none , inherit . The default is none .

• left clear left float
• right clear right float
• none default value of 060d3538744d3a, usually not used, unless a content that clear
• inherit element inherits the value of its parent element
• both most commonly used, to clear the float on the left and right sides

Parent element collapse

Using the float attribute, one of the most troublesome things is how they affect the element that contains them (their "parent" element). If the parent element contains only floating elements, then its height will actually collapse to zero. If the parent does not contain any visually obvious background, you may not be able to see it, but it is important to note this.

Although the collapse of the parent element is counter-intuitive, there are alternatives that are worse. Consider this scenario:

If the block element at the top automatically expands to accommodate the floating element, we will have unnatural spacing breaks in the text flow between paragraphs, and there is no practical way to fix it. If this is the case, our designers may complain about this behavior more than our complaints about collapse (folding) problems.

It is almost always necessary to deal with collapse (folding) to prevent strange layouts and cross-browser issues. We fix it by clearing the float after floating the element in the container but before closing the container.

Tips for clearing floats

When we clearly know the position of the floating element, we can simply use clear:both . But clearly knowing the position of the floating element is too ideal, and we need to have more clear floating tools in our toolbox.

Commonly used are:

• Overflow
• Pseudo element: after
• Empty div tag

Overflow method

The overflow overflow method relies on setting the overflow css attribute on the parent element. If this attribute is set to auto or hidden on the parent element, the parent will expand to include floats, effectively clearing floats for subsequent elements. This method may perform better semantics, because it may not require additional elements. However, if you find yourself adding a new div to apply it, it has no semantics like the empty div method and is less adaptable. Also remember that the overflow property is not designed to clear floats, be careful not to hide content or trigger unnecessary scroll bars.

Empty div tag

As the name suggests, it is an empty div label, and there is div label, <div style="clear: both;"></div> . Sometimes you may see a <br /> tag with some other block-level elements. However, the div tag is the most common, because it does not have the browser default style, and does not have any special semantics and functions, unlike the p tag. However, the use of this method will be despised by some developers who respect the semantics of HTML tags, because its existence has no meaning to the page and is purely redundant. Of course, in a strict sense, their views are correct, but It can accomplish the purpose correctly and will not affect other tags.

The complete description should be-insert the floating block-level element before the end tag of the floating parent element. Assume that the empty block-level element is <div class='emptyClear'></div> . We also need to set clear floating CSS properties for it

.emptyClear{
    clear:both;
}

The element added at the end of the parent element must be a block-level element , otherwise the height of the parent element cannot be supported.

:after pseudo element method

The easiest and most convenient way is to use a clever CSS pseudo-selector (:after) to clear the float. Instead of setting the overflow attribute in the parent tag, add a class clearfix to the parent element and declare it in CSS.

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

This will add a small . content and hide it from view, thus clearing the floating parent element. This is not all, because additional code is needed to adapt to old browsers.

other

If you need to achieve the effect of "text wrapping", it seems that there is no alternative to floating float But for page layout, the front-end has developed to this day, and better layout methods have appeared-Flex layout and Grid layout; therefore, the use of floating for page layout is no longer applicable. We should try to avoid using float To carry out the page layout. float the use of the 060d35387451eb attribute, we should return to its essence, the text surrounds the picture; although we can also use display:inline-block; to achieve the same effect, it is better to choose float, after all, this is the original intention of the float

reference

All about Floats

Critical float

[Four Ways to Clear Floating and Their Principle Understanding](