您的位置：首页 > Web前端 > HTML5

HTML5学习_day05(4)--html之float具体表现

2016-09-26 16:12 281 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动具体表现形式</title>
<style type="text/css">
.class1
{
width: 300px;
height: 200px;
background: wheat;
/*float: left;*/
/*position: absolute;   定位属性 可注释float查看效果 定位是完全脱离文档流,所以div3的一些文字被覆盖了  但是float是半脱离文档流  所以div3文字会自动环绕*/
}
.class2
{
width: 400px;
height: 300px;
background: yellowgreen;
float: right;
}
.class3
{
width: 500px;
height: 400px;
background: saddlebrown;

}
.a
{
width: 400px;
height: 300px;
background: yellowgreen;
float: left;
}
.b
{
width: 500px;
height: 400px;
background: saddlebrown;

}
.a1
{
width: 400px;
height: 300px;
background: yellowgreen;
float: left;
}
.b1
{
width: 500px;
height: 400px;
background: saddlebrown;
}

</style>
</head>
<body>
<!--1.如果当前元素时block元素且设置浮动，对后面block元素的影响
结论：
1.没有设置浮动的元素会填充浮动填充遗留下来的空间
2.浮动元素会跟非蠕动元素发生重合，浮动元素在图层最上面
3.使用float脱离文档流时，其他盒子会无视这个元素，但盒子里面的内容依然会成为这个浮动元素让出位置，并且会环绕周围。

<div class="class1">我是块级元素1,设置了向左浮动</div>
<div class="class2">我是块级元素2,没有设置</div>
<div class="class3">我是块级元素3,没有设置11111111 11111111111111 1111111111111111111</div>-->

<!--
2.如果块级元素设置了float属性，对其后没设置浮动的行元素或内敛块级元素的影响。
结论：
b会紧跟在a的后面，并且b会更具自身内敛元素的特点来确定是否换行，常用于文字环绕。

<div class="a">我是块级元素，且设置了float</div>
<span class="b">我是行内元素，没有设置float</span>-->

<!--3.假如当前元素为行内元素且设置浮动，对后面的未设置float的块级元素的影响.
结论:行内标签设置了float后，宽高可设置。
2.元素变成inline-block，脱离文档流，原有空间被没有设置的浮动元素占据
<span class="a1">我是行内元素，并且设置了float向左</span>
<div class="b1">我是块级元素，没有设置浮动</div>-->

<!--4.假如当前元素时行内元素且设置了浮动，对后面为设置浮动的行内元素的影响。
结论：b会紧跟a元素的后面，b元素会根据自身元素的特点来确实是否换行，常用语文字围绕。
-->

<span class="a1">我是行内元素，且设置了float</span>
<span class="b1">我是行内元素，没有设置浮动</span>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 float 实例

相关文章推荐

新的分享

章节导航