HTML布局之元素浮动属性-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_16353/article/details/82652690

[align=center]HTML布局之元素浮动属性[/align]
[b]1.1 CSS float属性[/b]
语法：
float:left;[color=green]//设置元素靠左浮动[/color]
float:right;[color=green]//设置元素靠右浮动[/color]
float:none;[color=green]// 默认值。元素不浮动，并会显示在其在文本中出现的位置[/color]
[color=red]注意：任何元素都可以浮动。[/color]
[b]1.2设置float属性带来的后果[/b]
1、一个元素设置浮动之后，会生成一个块级框，而不论它本身是何种元素。
2、一个元素设置浮动之后，它会浮动紧靠到父元素容器的边界，如果该元素没有父元素，它就会浮动到页面容器的边界。
3、一个元素浮动之后，页面正常流里面的其他元素会环绕该元素。
[b]1.3清除元素浮动[/b]
CSS clear属性规定元素的哪一侧不允许其他浮动元素。设置clear属性，使元素恢复到正常文档流。
语法：
clear:left;[color=green]//在左侧不允许浮动元素[/color]
clear:right;[color=green]//在右侧不允许浮动元素[/color]
clear:both;[color=green]//在左右两侧均不允许浮动元素[/color]
clear:none;[color=green]//默认值。允许浮动元素出现在两侧[/color]
[b]1.4应用实例[/b]
例1：
布局示意图：
<body>
<heaer></header>
<section></section>
<aside></aside>
<footer></footer>
</body>
分析：
默认情况下section和aside作为块级元素，布局是头尾相接。使用float属性，将<section>和<aside>设置为一个左浮动，一个右浮动，即可完成两者靠边并排布局。
CSS代码：
section{
float: left;
margin: 10px;
width: 600px;
}
aside{
float: right;
margin: 10px;
width: 320px;
}
给footer元素设置clear属性迫使它回到正常的文档流——定位到俩个浮动元素的下面。
footer{
clear: both;
}
[color=red]注意：使用float属性进行左右布局时，应考虑父级元素的宽度。如果父级元素的宽度小于两者的总宽度时，写在前面的元素会显示在上面，另一个紧接显示在下一行。
[/color]