首页 > 代码库 > WEB前端开发学习----5.理解 CSS 浮动float

WEB前端开发学习----5.理解 CSS 浮动float

首先需要明白两个概念:内联元素 , 块元素。

  内联元素 :也叫做行内元素,可以容纳文字或其他内联元素。内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度,不会进行换行。常见的内联元素:<span></span>, <a></a>, <img></img>, <font></font>, <strong></strong>等

  块元素:可以容纳文本,其他内联元素和块元素。可以设置其高度宽度。排斥与其他元素位于同一行。常见的块元素:<h1></h1>, <p></p>, <div></div> 等

  

  这时就会有个问题,如果我们设置3个div块,它就会按照html文档的编写顺序进行纵向摆列,如图:

技术分享

  块元素会自动换行,如果我们想要让它在一行中显示,怎么解决呢? 当然了,方法不止一种。今天说一下最常见的设置方法,浮动。

  如果将块元素进行浮动设置,那么它就会按照我们的指定向左或右进行浮动至父元素的边框,而且会使其不在html文档的标准流(编写顺序)中。从而达到对块元素的定位。

  比如上图,我们将框1设为右浮动(float:lright), 那么它会脱离标准流,浮动到边框的右上角。因为脱离了标准流,可以视为它不存在。那么框2,框3就会上移。如下图所示:

技术分享

  需要注意:如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。如图:

技术分享

所以如果我们想让3个框都在同一行显示,就需要将他们都设置为左浮动,并且有合适大小的父元素边框。

给出一个常见的案例,这是网易图片新闻中的标签栏,如图:

技术分享

上边的标签需要使用JavaScript, 我后边会进行学习,今天只需要实现新闻图片加下边的链接,注意:当鼠标移动至下边的链接是,字体变为橙色,并有下划线出现。

效果:技术分享

完整代码

[html] view plaincopy
 
  1. <head>  
  2.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
  3.     <title>网易社会新闻</title>  
  4.     <style type="text/css">  
  5.         body,ul,li,p{margin:0; padding:0; font-size: 12px;}  
  6.         img,p{width: 170px; height: 128px; margin-left: 20px;}  
  7.         p{width:170px;height:30px;}  
  8.         ul{  
  9.             width: 1000px;  
  10.             height: 200px;  
  11.             list-style: none;  
  12.             border:1px solid gray;  
  13.             padding-top:40px;  
  14.             padding-left: 45px;  
  15.             margin:0 auto;  
  16.         }  
  17.         li{  
  18.             float:left;  
  19.         }  
  20.         a:link{  
  21.             color:black;  
  22.             text-decoration: none;  
  23.         }  
  24.         a:hover{  
  25.             color:orange;  
  26.             text-decoration: underline;  
  27.         }  
  28.     </style>  
  29. </head>  
  30. <body>  
  31.     <ul>  
  32.         <li>  
  33.             <href=http://www.mamicode.com/"#" title="犀鸟"><img src=http://www.mamicode.com/"img/1.jpg"/><p>我国专家首次观测到冠斑犀鸟野外繁殖过程</p></a>  
  34.         </li>  
  35.         <li>  
  36.             <href=http://www.mamicode.com/"#" title="地震"><img src=http://www.mamicode.com/"img/2.jpg"/><p>鲁甸地震灾区的孩子们</p></a>  
  37.         </li>  
  38.         <li>  
  39.             <href=http://www.mamicode.com/"#" title="干旱"><img src=http://www.mamicode.com/"img/3.jpg"/><p>河南因干旱损失逾40亿元</p></a>    
  40.         </li>  
  41.         <li>  
  42.             <href=http://www.mamicode.com/"#" title="西安"><img src=http://www.mamicode.com/"img/4.jpg"/><p>西安久旱逢“甘露” 民众乐享清凉</p></a>  
  43.         </li>  
  44.         <li>  
  45.             <href=http://www.mamicode.com/"#" title="地铁"><img src=http://www.mamicode.com/"img/5.jpg"/><p>上海地铁三条线路早高峰齐发故障</p></a>         
  46.         </li>  
  47.     </ul>  
  48. </body>  
  49. </html>  

WEB前端开发学习----5.理解 CSS 浮动float