Heim > Web-Frontend > HTML-Tutorial > 围住浮动元素的三种方法 - 侠奕

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-05-21 08:35:07
Original
1091 Leute haben es durchsucht

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>
Nach dem Login kopieren

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> }
Nach dem Login kopieren

效果图:

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

方法一:为父元素添加 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> }
Nach dem Login kopieren

//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> }
Nach dem Login kopieren

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

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

第一种:

  简单地在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>
Nach dem Login kopieren

   在此,为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> }
Nach dem Login kopieren

第二种:

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

  首先为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>
Nach dem Login kopieren

  然后,再使用这个神奇的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> }
Nach dem Login kopieren

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

 

 

 

 

  

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage