HTML布局之元素浮动属性

[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]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值