社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > html教程 > 正文

CSS重要属性之float学习心得

WBOY
发布： 2016-08-18 08:57:56
原创
1235 人浏览过







我们来看看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 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 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 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></span></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 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 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></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 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 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 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></span></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 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 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></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 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 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 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></span></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 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 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 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></span></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 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 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 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 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></span></span></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 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 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 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></span></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，可以关注一下张鑫旭大牛





                

            

            

                                

                    相关标签：
                    

                        CSS重要属性之float学习心得                    

                

                                
来源：php.cn

                            

            

                                    
                        上一篇：Iframe网页内部的导航窗口
                    
                                    
                        下一篇：兼容IE6的min-width、min-height
                    
                            

            

       
                
本站声明

                
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

            

           

            

                
作者最新文章

                
            

            

                
最新问题

                

                                        

                        

                            function_exists()无法判定自定义函数
                            function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
                            

                                

                                     来自于 2024-04-29 11:01:01
                                

                                

                                    
  0 

                                    
2

                                    
1876

                                

                            

                        

                    

                    

                                        

                        

                            google 浏览器 手机版显示的怎么实现
                            老师您好，google 浏览器怎么变成手机版样式的？
                            

                                

                                     来自于 2024-04-23 00:22:19
                                

                                

                                    
  0 

                                    
10

                                    
2043

                                

                            

                        

                    

                    

                                        

                        

                            子窗口操作父窗口，输出没反应
                            前两句可执行，最后一句没法应
                            

                                

                                     来自于 2024-04-19 15:37:47
                                

                                

                                    
  0 

                                    
1

                                    
1719

                                

                            

                        

                    

                    

                                        

                        

                            父窗口没有输出
                            document.onclick = function(){	window.opener.document.write('我是子窗口的输出');                  ...
                            

                                

                                     来自于 2024-04-18 23:52:34
                                

                                

                                    
  0 

                                    
1

                                    
1621

                                

                            

                        

                    

                    

                                        

                        

                            关于CSS思维导图的课件在哪？
                            课件
                            

                                

                                     来自于 2024-04-16 10:10:18
                                

                                

                                    
  0 

                                    
0

                                    
1633

                                

                            

                        

                    

                    

                                    

            

            

                

                    
相关专题

                    更多>
                    
                

                

                    
                

            

        

    

    

        

            
热门推荐

            

                
            

        

        
        

            

                
热门教程

                更多>
                
            

            

                

                    
相关教程 

                    
热门推荐

                    
最新课程

                

                
                
                
            

            
        


        

            

                
最新下载

                更多>
                
            

                        
            

                

                    
网站特效 

                    
网站源码

                    
网站素材

                    
前端模板