围住浮动元素的三种方法 - 侠奕

html代码

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>         <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="sea.png"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="sea"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></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;">section</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>     <span style="color: #0000ff;"><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span><span style="color: #000000;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span>tempor incididunt ut labore et dolore magna aliqua. <span style="color: #0000ff;"></span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span> <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></span></span></span></span></span>

CSS代码

<span style="color: #008080;"> 1</span> <span style="color: #800000;">p</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;"> 3</span> }
<span style="color: #008080;"> 4</span> <span style="color: #800000;">img</span>{
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">    float</span>:<span style="color: #0000ff;">left</span>;
<span style="color: #008080;"> 6</span> }
<span style="color: #008080;"> 7</span> <span style="color: #800000;">section</span>{
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;">1px solid green</span>;    
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">0 0 10px 0</span>;
<span style="color: #008080;">10</span> }
<span style="color: #008080;">11</span> <span style="color: #800000;">footer</span>{
<span style="color: #008080;">12</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> #ccc</span>;
<span style="color: #008080;">13</span> }

效果图：

、

下面介绍三种围住浮动元素的方法。最终达成的效果都是：

方法一：为父元素添加 overflow:hidden　　　

<span style="color: #008080;">1</span> <span style="color: #800000;">section</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;">1px solid green</span>;    
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">0 0 10px 0</span>;
<span style="background-color: #ccffff;"><span style="color: #008080;">4</span> <strong><span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;"> hidden</span>;</strong></span>
<span style="color: #008080;">5</span> }

//overflow：hidden声明的真正用途是 1.防止包含元素被超大内容撑大。应用overflow：hidden之后，包含元素依然保持其特定的宽度，而超大的子内容则会被容器剪切掉；2.它能可靠地迫使父元素包含其浮动的子元素。

方法二：同时浮动父元素

<span style="color: #008080;"> 1</span> <span style="color: #800000;">section</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;">1px solid green</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;">0 0 10px 0</span>;    
<span style="color: #008080;"> 4</span> <span style="background-color: #ccffff;"><span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">100%</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">    float</span>:<span style="color: #0000ff;">left</span>;</span>
<span style="color: #008080;"> 6</span> }
<span style="color: #008080;"> 7</span> <span style="color: #800000;">footer</span>{
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> #ccc</span>;
<span style="color: #008080;"> 9</span> <span style="background-color: #ccffcc;"><span style="color: #ff0000;">    clear</span>:<span style="color: #0000ff;">left</span>;</span>
<span style="color: #008080;">10</span> }

方法三：添加非浮动的清除元素

　　给父元素的最后添加一个非浮动的子元素，然后再清除该子元素。其中有两种方案。

第一种：

　　简单地在HTML中添加一个子元素，并给它应用clear属性。

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>         <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="sea.png"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="sea"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>         <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></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; background-color: #ffcc99;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="clear"</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;">section</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span>     <span style="color: #0000ff;"><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span><span style="color: #000000;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</span><span style="color: #0000ff;"></span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">8</span> <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

 　　在此，为div添加了一个类，以便于在CSS中写样式。

<span style="color: #008080;">1</span> <span style="color: #800000;">div.clear</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    clear</span>:<span style="color: #0000ff;">left</span>;
<span style="color: #008080;">3</span> }

第二种：

　　如果你特别不想添加这个纯表现性的元素，有一个更好的方法。

　　首先为section添加一个类clearfix

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">section </span><span style="background-color: #ccffcc;"><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="clearfix"</span></span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="sea.png"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="sea"</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: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span> <span style="color: #0000ff;"></span><span style="color: #800000;">section</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span> <span style="color: #0000ff;"><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<span style="color: #0000ff;"></span><span style="color: #800000;">footer</span><span style="color: #0000ff;">></span> </span></span></span></span>

　　然后，再使用这个神奇的clearfix规则

<span style="color: #008080;">1</span> <span style="color: #800000;">.clearfix:after</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    content</span>:<span style="color: #0000ff;">"."</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">block</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">0</span>;
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    visibility</span>:<span style="color: #0000ff;">hidden</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    clear</span>:<span style="color: #0000ff;">both</span>;
<span style="color: #008080;">7</span> }

　　//这个clearfix规则最早是由程序员Tony Aslett发明的，它只添加了一个清除的包含句点作为非浮动元素。