CSS重要屬性之float學習心得
- WBOY原創
- 2016-08-18 08:57:561262瀏覽
我們來看看CSS重要屬性--float。
以下內容分為如下小節：
1：float屬性
2：float屬性的特性
2.1：float之文字環繞效果
2.2：float之父元素高度塌陷
3：清除浮動的方法
3.1：html法
3.2：css偽元素法
4：float去空格化
5：float元素塊狀化
6：float流體佈置
6.1：單側固定
6.2：DOM與顯示位置不同的單側固定
6.3：DOM與顯示位置相同的單側固定
6.4：智慧佈局
1：float屬性
float，顧名思義是漂浮，浮動的意思。但是在css中，它被理解成浮動。 float有四個屬性，即
<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;
比較常用的兩個屬性值是左浮動和右浮動。在接下來的分享中，只會拿左浮動作為例子。其他浮動屬性值與左浮動原理相同。
2：float屬性的特性
2.1：float之文字環繞效果
浮動的初衷就是為了文字環繞效果。
看如下程式碼和demo。
<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> }
content 元素設定了左浮動，使div元素脫離文件流，文字在其周圍壞繞顯示。
2.2：float之父元素高度塌陷
以div元素為例。 div元素的高度會透過內容自動撐開。也就是說，內容有多少，高度就有多高。但是當內部元素設定了float屬性之後，會是父元素高度塌陷。程式碼和實例如下。
<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>
如下，塌陷後css和demo。
<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> }
可以看出，子元素設定浮動前後發生的變化。
3：清除浮動的方法
那麼問題來了，如果內部元素要設定浮動，那如何避免父元素高度塌陷的問題呢？
有同學一定會想，直接在父元素設定高度不就可以了嗎？這在實際中是不行的。因為如果固定了父元素的高度，那如果之後想在其添加內容，不是又要去修改css代碼了，特麻煩。
那解決父元素高度塌陷有兩種方法。
3.1：父元素底部新增空白div，然後在新增屬性clear : both。
程式碼如下。
<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：父元素設定偽類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，可以关注一下张鑫旭大牛
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Iframe網頁內部的導航窗口下一篇：Iframe網頁內部的導航窗口