Learning experience of float important properties of CSS

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

<span style="color: #008080;">1</span> <span style="color: #0000ff;">float</span><span style="color: #000000;">:none;
</span><span style="color: #008080;">2</span> <span style="color: #0000ff;">float</span><span style="color: #000000;">:left;
</span><span style="color: #008080;">3</span> <span style="color: #0000ff;">float</span><span style="color: #000000;">:right;
</span><span style="color: #008080;">4</span> <span style="color: #0000ff;">float</span>: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: The text wrapping effect of float

The original intention of floating is for the text wrapping effect.

See the code and demo below.

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="content"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span> <span style="color: #000000;">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!
</span><span style="color: #008080;">5</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>    

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">  border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
<span style="color: #008080;"> 5</span> }
<span style="color: #008080;"> 6</span> <span style="color: #800000;">.container .content </span>{
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 150px</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 150px</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 5px</span>;
<span style="color: #008080;">12</span> }

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.

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> <span style="color: #000000;">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!
</span><span style="color: #008080;">4</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

As follows, css and demo after collapse.

<span style="color: #008080;">1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">  border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
<span style="color: #008080;">4</span> }
<span style="color: #008080;">5</span> <span style="color: #800000;">.container p </span>{
<span style="color: #008080;">6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;">7</span> }

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.

<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> <span style="color: #000000;">            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!
</span><span style="color: #008080;">4</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="clearfix"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container p </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 7</span> }
<span style="color: #008080;"> 8</span> <span style="color: #800000;">.container .clearfix </span>{
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  overflow</span>:<span style="color: #0000ff;"> hidden</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  *zoom</span>:<span style="color: #0000ff;"> 1</span>;
<span style="color: #008080;">11</span> }

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

<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> <span style="color: #000000;">            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!
</span><span style="color: #008080;">4</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  border</span>:<span style="color: #0000ff;"> 1px solid black</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">  *zoom</span>:<span style="color: #0000ff;"> 1</span>;
<span style="color: #008080;"> 5</span> }
<span style="color: #008080;"> 6</span> <span style="color: #800000;">.container p </span>{
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 8</span> }
<span style="color: #008080;"> 9</span> <span style="color: #800000;">.container:after </span>{
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  content</span>:<span style="color: #0000ff;"> ""</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> table</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  clear</span>:<span style="color: #0000ff;"> both</span>;
<span style="color: #008080;">13</span> }

 

4：float元素去空格化

是什么意思呢？在平时的编码中，为了要符合HTML编码规范，都会为html标签添加缩进，达到美观的效果。可是缩进时就会产生空格，也就是 。当给元素设置左浮动时，元素本身左浮动，剩余的空格会被挤到最后，也就是上文所说的文字环绕效果。但是，要记住一点， 和回车敲下的空格的效果略有不同。

5：float元素块状化

在为内联元素设置浮动属性之后，display属性由inline变成block。并且可以为内联元素设置宽高。使用float加width属性可以实现一些简单的固定宽度的布局效果。

6：float流体布局

 

　　6.1：单侧固定，右侧自适应的布局。

<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>左浮动+固定宽度<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>右边自适应宽度+margin-left<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    max-width</span>:<span style="color: #0000ff;">90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> 
<span style="color: #008080;"> 6</span> <span style="color: #800000;">.left</span>{
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">    float</span>:<span style="color: #0000ff;">left</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    text-align</span>:<span style="color: #0000ff;">center</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">300px</span>;
<span style="color: #008080;">12</span> }
<span style="color: #008080;">13</span> 
<span style="color: #008080;">14</span> <span style="color: #800000;">.right</span>{
<span style="color: #008080;">15</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">    margin-left</span>:<span style="color: #0000ff;">200px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">300px</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">    padding-left</span>:<span style="color: #0000ff;">10px</span>;
<span style="color: #008080;">19</span> }

 
　　6.2：DOM与显示位置不同的单侧固定

<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>右浮动+固定宽度<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>左边自适应宽度+margin-right<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> right</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;">10</span> }
<span style="color: #008080;">11</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">  margin-right</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">15</span> <span style="color: #ff0000;">  padding-left</span>:<span style="color: #0000ff;"> 10px</span>;
<span style="color: #008080;">16</span> }

 

 也就是说，html元素与显示在页面上的元素位置不相同。

　　6.3：DOM与显示位置相同的单侧固定 

<span style="color: #008080;">1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left-content"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>                 <span style="color: #008000;"><!--</span><span style="color: #008000;"> 左浮动+width100% </span><span style="color: #008000;">--></span>
<span style="color: #008080;">4</span>                 <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>margin-right<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>左浮动+固定宽度+margin-left负值<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  margin-left</span>:<span style="color: #0000ff;"> -200px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">12</span> }
<span style="color: #008080;">13</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">15</span> <span style="color: #ff0000;">  margin-right</span>:<span style="color: #0000ff;"> 200px</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">  text-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">18</span> }

　　6.4：智能布局

所谓智能布局，就是两栏都不需要设置宽度，宽度随内容自适应。

<span style="color: #008080;"> 1</span>         <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #000000;">                float+margin-right+自适应宽度
</span><span style="color: #008080;"> 4</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>             <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #000000;">                display:table-cell  ---IE8+;
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;">                display:inline-block   ---IE7+;
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">                自适应宽度
</span><span style="color: #008080;"> 9</span>             <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span>         <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;"> 9</span> }
<span style="color: #008080;">10</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> table-cell</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  *display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">15</span> }

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.container </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  max-width</span>:<span style="color: #0000ff;"> 90%</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">.container .left </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightpink</span>;
<span style="color: #008080;"> 9</span> }
<span style="color: #008080;">10</span> <span style="color: #800000;">.container .right </span>{
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> table-cell</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  *display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 300px</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">  background-color</span>:<span style="color: #0000ff;"> lightyellow</span>;
<span style="color: #008080;">15</span> }

 

总结以下：

1：当一个元素设置float属性时，会使元素块状化。

2：float属性的创造初衷就是为了文字环绕效果而生的。

3：float元素会使父元素高度塌陷。

4：float元素会除去换行带来的空格。

5：使用float可以实现两栏自适应的布局。

更多深入了解CSS，可以关注一下张鑫旭大牛