使用float浮动布局的方法-创新互联

这篇文章将为大家详细讲解有关使用float浮动布局的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司成立与2013年,先为静安等服务建站,静安等地企业,进行企业商务咨询服务。为静安企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

                                                         使用float(浮动)可以如何布局?本篇文章就给大家介绍利用float(浮动)来如何布局内容。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

在之前的文章【float是什么?float属性详解】中介绍了float属性是什么,为什么要有浮动等等知识,大家感兴趣的,可以参考一下。下面我们通过浮动布局的示例,来看看float来如何布局内容。

1、使用float来实现内容环绕

html代码:

浮动--文字环绕

向左浮动

此文本位于浮动盒子(.box_left)之后的正常段落中。该段可以看作是浅绿色的盒子。请注意,此轮廓延伸 到浮动div的 后面。这很重要,因为这意味着段落的左侧实际上位于页面的左侧。只是该段落的内容已经向右移动,以“绕过”浮动的DIV。如果你试图操纵与浮点相邻的段落一侧的边距或 填充,则会产生影响。

向右浮动

现在我们添加第二段并用内容充实它。你应该看到,一旦覆盖了div的高度,此段落文本将环绕它,以便文本不再缩进。类似的效果可在html通过设置来实现。

float属性的一个复杂因素是Internet Explorer将在浮动的div盒子和后面的文本之间添加一些填充像素。这在标准中没有位置,只是他们“弱化”CSS和HTML的方式。在其他浏览器中,段落文本将与浮动的DIV对接。如果要在所有浏览器中填充,则需要为浮动元素指定边距。

css代码:

.demo {
	width: 520px;
	overflow: hidden;
	border: 2px solid paleturquoise;
	padding: 10px;
	margin: 100px auto;
}

.box_left {
	float: left;
	margin-right: 15px;
	width: 150px;
	height: 100px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

.box_right {
	float: right;
	margin-left: 15px;
	width: 150px;
	height: 100px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

效果图:

使用float浮动布局的方法

2、使用'clear'强制内容通过浮动

使用float布局内容时常见的错误是忘记添加清除。这是对浮动内容之后的元素的指令,让元素向下移动足够远的距离,使其不受前面浮动内容的影响。

当float元素后面的“正常”内容不足以清除它时,就会出现元素上移的问题。

在这种情况下,你可能会看到后续部分的标题生效,甚至内容溢出页面的“内容”部分。这是因为浮动的内容被“从文档流中取出”,因此不会强制任何包含框在页面上向下扩展。

当没有其他元素存在时,强制容器在浮动内容周围展开的最佳方法是插入一个空的div,其中clear设置为'both',如下所示:

我们把上例修改一下:

浮动--文字环绕

向左浮动

此文本位于浮动盒子(.box_left)之后的正常段落中。该段可以看作是浅绿色的盒子。请注意,此轮廓延伸 到浮动div的 后面。这很重要,因为这意味着段落的左侧实际上位于页面的左侧。只是该段落的内容已经向右移动,以“绕过”浮动的DIV。如果你试图操纵与浮点相邻的段落一侧的边距或 填充,则会产生影响。

向右浮动

现在我们添加第二段并用内容充实它。你应该看到,一旦覆盖了div的高度,此段落文本将环绕它,以便文本不再缩进。类似的效果可在html通过设置来实现。

float属性的一个复杂因素是Internet Explorer将在浮动的div盒子和后面的文本之间添加一些填充像素。这在标准中没有位置,只是他们“弱化”CSS和HTML的方式。在其他浏览器中,段落文本将与浮动的DIV对接。如果要在所有浏览器中填充,则需要为浮动元素指定边距。

效果图:

使用float浮动布局的方法

3、使用浮动将内容分成列

html代码:

第一列

float的一个稍微不常见属性但有非常强大的用途,可以将内容分组为列。这可以通过将div向左浮动以形成左侧列,然后添加第二个div来完成,同时向左浮动以位于其旁边。每个DIV必须具有宽度,你可以向第一个DIV添加右边距以分隔列。在许多情况下,这使得TABLE元素的使用变得不必要。

第一列

你可以看到此框中的内容与第一个段落相邻,并且与第一个示例不同,一旦清除了第一个浮点的高度,它就不会回绕。

使用这种布局,你必须记住在最后一个DIV之后添加一个清除,否则后续内容可以出现在两列中和周围。

css代码:

.demo {
	width: 800px;
	overflow: hidden;
	border: 2px solid paleturquoise;
	padding: 10px;
	margin: 100px auto;
}

.box_1 {
	float: left;
	margin-right: 15px;
	width: 200px;
	height: 310px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

.box_2 {
	float: left;
	margin-left: 15px;
	width: 200px;
	height: 310px;
	border-radius: 5px;
	background-color: rgb(207, 232, 220);
	padding: 1em;
}

效果图:

使用float浮动布局的方法

你也可以不仅限于设置两列浮动,并且可以很容易地在页面上有三个或四个。还有其他选择。对于三列布局,你可以向左和向右浮动div并在其间显示“正常”内容。

4、使用浮动“平铺”图像和文本

现在我们来看一些应该简单但实际上非常复杂的东西。如果你有很多小DIV - 例如照片库中的照片 - 你只需将它们全部浮动到一侧就可以创建一个简单的页面。

当要浮动的物品都具有相同的高度时,这非常有效:

使用float浮动布局的方法

但是当高度不同时就会出现很多问题,因为“较高”的物品会阻止那些随后漂浮到左侧的物品:

注意:重新加载此页面以查看其他配置。

使用float浮动布局的方法

如果是这种情况,那么最安全的选择是使用table表格进行布局。在某些情况下,您可以通过向每个第n个元素插入clear =“left”来避免这种情况 ,但是在添加或删除项目时可能难以维护。

关于使用float浮动布局的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网站栏目:使用float浮动布局的方法-创新互联
标题网址:http://pwwzsj.com/article/cdjjhe.html