CSS attribute float learning experience

Full text reference: http://www.linzenews.com/program/net/2331.html

Let’s take a look at the important CSS attribute-float.

The following content is divided into the following subsections:

1: float attribute

2: Characteristics of float attribute

　2.1: float text wrapping effect

　2.2: The father element of float is highly collapsed

3: Method to clear float

　3.1: html method

　3.2: css pseudo-element method

4: De-space float

5: block float elements

6: float fluid layout

　6.1: Unilateral fixation

　6.2: One-sided fixation with different DOM and display positions

　6.3: One-sided fixation with the same DOM and display position

　6.4: Smart layout


1: float attribute

float, as the name suggests, means floating. But in css it is understood as float. float has four attributes, namely

1 float:none;
2 float:left;
3 float:right;
4 float:inherit;

The two most commonly used attribute values ​​are left floating and right floating. In the following sharing, only left floating will be used as an example. The principle of other floating attribute values ​​is the same as that of left floating.

2: Characteristics of float attribute

　2.1: Text wrapping effect of float

The original intention of floating is for text wrapping effect.

See the code and demo below.

1 <div class="container">
2     <div class="content"></div>
3     <p>
4 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
5         </p>
6     </div>    

 1 .container {
 2   width: 300px;
 3   height: 300px;
 4   border: 1px solid black;
 5 }
 6 .container .content {
 7   float: left;
 8   width: 150px;
 9   height: 150px;
10   background-color: lightpink;
11   margin: 5px;
12 }

The content element is set to left floating, which makes the div element break away from the document flow and the text is displayed around it.

　2.2: The father element of float is highly collapsed

Take the div element as an example. The height of the div element will be automatically expanded by the content. In other words, the height is as high as the content is. But when the float attribute is set on the internal element, the height of the parent element will collapse. The code and examples are as follows.

1 <div class="container">
2     <p>
3 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
4     </p>
5 </div>

As follows, css and demo after collapse.

1 .container {
2   width: 300px;
3   border: 1px solid black;
4 }
5 .container p {
6   float: left;
7 }

You can see the changes that occurred before and after the child element was set to float.

3: Method to clear float

Then the question is, if the internal elements are to be floated, how to avoid the height collapse of the parent element?

Some students will definitely think, wouldn’t it be enough to set the height directly on the parent element? This is not possible in practice. Because if the height of the parent element is fixed, then if you want to add content to it later, you will have to modify the css code, which is very troublesome.
There are two ways to solve the problem of height collapse of the parent element.
　3.1: Add an empty div at the bottom of the parent element, and then add the attribute clear: both.

　The code is as follows.

1         <div class="container">
2             <p>
3             Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
4             </p>
5             <div class="clearfix"></div>
6         </div>

 1 .container {
 2   width: 300px;
 3   border: 1px solid black;
 4 }
 5 .container p {
 6   float: left;
 7 }
 8 .container .clearfix {
 9   overflow: hidden;
10   *zoom: 1;
11 }

　3.2: The parent element sets the pseudo-class after.

1         <div class="container">
2             <p>
3             Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
4             </p>
5         </div>

 1 .container {
 2   width: 300px;
 3   border: 1px solid black;
 4   *zoom: 1;
 5 }
 6 .container p {
 7   float: left;
 8 }
 9 .container:after {
10   content: "";
11   display: table;
12   clear: both;
13 }

4: Remove spaces from float elements

What does

mean? In daily coding, in order to comply with HTML coding standards, indentation is added to html tags to achieve a beautiful effect. However, spaces will be generated when indenting, that is,  . When setting left floating for an element, the element itself floats left, and the remaining spaces will be squeezed to the end, which is the text wrapping effect mentioned above. However, please remember that the effect of   is slightly different from that of pressing Enter.

5: block float elements

After setting the floating attribute for the inline element, the display attribute changes from inline to block. And you can set the width and height for inline elements. Using float and width attributes can achieve some simple fixed-width layout effects.

6: float fluid layout

　6.1: Fixed on one side, adaptive layout on the right side.

1         <div class="container">
2             <div class="left">左浮动+固定宽度</div>
3             <div class="right">右边自适应宽度+margin-left</div>
4         </div>

 1 .container{
 2     max-width:90%;
 3     margin:0 auto;
 4 }
 5 
 6 .left{
 7     float:left;
 8     text-align:center;
 9     background-color: lightpink;
10     width: 200px;
11     height:300px;
12 }
13 
14 .right{
15     background-color: lightyellow;
16     margin-left:200px;
17     height:300px;
18     padding-left:10px;
19 }

　6.2: One-sided fixation with different DOM and display positions

1         <div class="container">
2             <div class="right">右浮动+固定宽度</div>
3             <div class="left">左边自适应宽度+margin-right</div>
4         </div>

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .right {
 6   float: right;
 7   width: 200px;
 8   height: 200px;
 9   background-color: lightpink;
10 }
11 .container .left {
12   background-color: lightyellow;
13   margin-right: 200px;
14   height: 300px;
15   padding-left: 10px;
16 }

In other words, the html element is not in the same position as the element displayed on the page.

　　6.3: One-sided fixation with the same DOM and display position

1         <div class="container">
2             <div class="left-content">
3                 <!-- 左浮动+width100% -->
4                 <div class="left">margin-right</div>
5             </div>
6             <div class="right">左浮动+固定宽度+margin-left负值</div>
7         </div>

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .right {
 6   float: left;
 7   width: 200px;
 8   height: 200px;
 9   background-color: lightpink;
10   margin-left: -200px;
11   height: 300px;
12 }
13 .container .left {
14   background-color: lightyellow;
15   margin-right: 200px;
16   height: 300px;
17   text-align: center;
18 }

　6.4: Smart layout

The so-called smart layout means that there is no need to set the width of the two columns, and the width adapts to the content.

 1         <div class="container">
 2             <div class="left">
 3                 float+margin-right+自适应宽度
 4             </div>
 5             <div class="right">
 6                 display:table-cell  ---IE8+;
 7                 display:inline-block   ---IE7+;
 8                 自适应宽度
 9             </div>
10         </div>

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .left {
 6   float: left;
 7   height: 300px;
 8   background-color: lightpink;
 9 }
10 .container .right {
11   display: table-cell;
12   *display: inline-block;
13   height: 300px;
14   background-color: lightyellow;
15 }

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .left {
 6   float: left;
 7   height: 300px;
 8   background-color: lightpink;
 9 }
10 .container .right {
11   display: table-cell;
12   *display: inline-block;
13   height: 300px;
14   background-color: lightyellow;
15 }

To summarize:

1: When an element is set to float attribute, it will make the element blocky.

2: The original intention of creating the float attribute was for the text wrapping effect.

3: Float elements will cause the height of the parent element to collapse.

4: Float elements will remove spaces caused by line breaks.

5: Use float to achieve a two-column adaptive layout.