Tricks clear stream clearfix and class = clear -

Lecture



We have:

  • parent block
  • floating block nested in parent block
  • text (or block, or whatever) that will flow around the floating block (needed for the demonstration)

HTML

one
2

This block with float: left;

3 text that will set the height of the parent
four
five

This is the next block in the general stream.

Questions:

  1. What height in this case will have a parent block (div class = "parent")?
  2. where is the block (div class = "nextStaticBlock") located under the parent block?

The correct answers in the picture:

it was expected that the next block would be located under the parent block whose height would be equal to the height of the tallest subsidiary block (in this example, the height of the floating block)
Tricks clear stream clearfix and class = clear -
in reality, the next block (in most browsers) is actually located under the parent block, but the height of the parent is equal to the height of the static (non-floating) content
Tricks clear stream clearfix and class = clear -

Old solution

We clear the stream using an additional element placed at the end of the parent block with the property or attribute clear (

<div style = "clear: both;> or
):

HTML

one <div class = "parent">
2 <div class = "floatBlock"> This block with float: left; </ div>
3 text that will set the height of the parent
four <div style = "clear: both;"> </ div>
five </ div>
6 <div class = "nextStaticBlock"> This is the next block in the general stream </ div>


The disadvantage of this method is that the useless element appears, which damages the structure and semantics of the code element. Often with a single purpose is to clear the stream.

New solution

Clear the stream using the pseudo-element: after

HTML

one <div class = "parent">
2 <div class = "floatBlock"> This block with float: left; </ div>
3 text that will set the height of the parent
four </ div>
five <div class = "nextStaticBlock"> This is the next block in the general stream </ div>


CSS:

CSS

one .parent: after {
2 content: ".";
3 display: block;
four height: 0;
five clear: both;
6 visibility: hidden;
7 }

- to hide the point it is better to use visibility: hidden instead of overflow: hidden, since In some browsers, the point is still visible.

and for IE we connect conditional comments (recommended) or using hacks (not recommended)

CSS

one .parent {
2 zoom: 1; / * set hasLayout * /
3 display: block; / * resets display for IE / Win * /
four }

or simply

.clearfix: after {

visibility: hidden;

display: block;

font-size: 0;

content: "";

clear: both;

height: 0;

}

Clear the overflow: hidden stream

There is also a better way to clear the stream - add an overflow: hidden rule to the parent that contains floating elements:

CSS

one .parent {
2 overflow: hidden;
3 zoom: 1; / * for IE * /
four }

Demo example. The method is simpler, but not always applicable (for example, when the parent contains absolutely positioned elements that should go beyond the boundaries of the parent. Example - drop-down menu).

Micro clearfix

If IE6-7 support is not needed:

CSS

one .parent: after {
2 content: "";
3 display: table;
four clear: both;
five }

If necessary, then it is safer to use this option:

CSS

01 / * For modern browsers * /
02 .parent: before,
03 .parent: after {
04 content: "";
05 display: table;
06 }
07 .parent: after {
08 clear: both;
09 }
ten
eleven / * for IE6-7 * /
12 .parent {
13 zoom: 1;
14 }

Comments

To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Cascading CSS / CSS3 Style Sheets

Terms: Cascading CSS / CSS3 Style Sheets