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

最新推荐文章于 2024-09-22 10:35:52 发布

carlosli

最新推荐文章于 2024-09-22 10:35:52 发布

阅读量2.9k

点赞数

分类专栏： web前端文章标签： web前端开发 css html 浮动

本文链接：https://blog.csdn.net/carlosli/article/details/38423823

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

内联元素：也叫做行内元素，可以容纳文字或其他内联元素。内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度，不会进行换行。常见的内联元素：<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, 我后边会进行学习，今天只需要实现新闻图片加下边的链接，注意：当鼠标移动至下边的链接是，字体变为橙色，并有下划线出现。

效果：

完整代码

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>网易社会新闻</title>
	<style type="text/css">
		body,ul,li,p{margin:0; padding:0; font-size: 12px;}
		img,p{width: 170px; height: 128px; margin-left: 20px;}
		p{width:170px;height:30px;}
		ul{
			width: 1000px;
			height: 200px;
			list-style: none;
			border:1px solid gray;
			padding-top:40px;
			padding-left: 45px;
			margin:0 auto;
		}
		li{
			float:left;
		}
		a:link{
			color:black;
			text-decoration: none;
		}
		a:hover{
			color:orange;
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<ul>
		<li>
			<a href="#" title="犀鸟"><img src="img/1.jpg"/><p>我国专家首次观测到冠斑犀鸟野外繁殖过程</p></a>
		</li>
		<li>
			<a href="#" title="地震"><img src="img/2.jpg"/><p>鲁甸地震灾区的孩子们</p></a>
		</li>
		<li>
			<a href="#" title="干旱"><img src="img/3.jpg"/><p>河南因干旱损失逾40亿元</p></a>	
		</li>
		<li>
			<a href="#" title="西安"><img src="img/4.jpg"/><p>西安久旱逢“甘露” 民众乐享清凉</p></a>
		</li>
		<li>
			<a href="#" title="地铁"><img src="img/5.jpg"/><p>上海地铁三条线路早高峰齐发故障</p></a>		
		</li>
	</ul>
</body>
</html>