float不会遮盖文本,文本会显示出来。
代码:
<style type="text/css">
.{margin:0px;padding:0px;}
#div1{
/*height: 60px;*/ /*如果不定义高度,会随内容自己扩展*/
/*width: 400px;*/
width: 100%;
margin:1px; /*当块状元素设置了宽度之后,margin-right的值并没有起作用到*/
border: 1px solid green;
overflow: hidden;
}
#div2{
border: 1px solid black;
/*height: 60px;*//*设置了float属性后如果不设置高度的话会根据内容的高度变化*/
/*width: 200px;*//*设置了float属性后如果不设置长度的话会根据内容的长度变化*/
margin:2px;
float:left;/*设置float属性,脱离文档流(不占用文档空间),不再属于div1的内容*/
}
#div3{
border: 1px solid orange;
height: 60px;
width: 200px;
margin:2px;
float:left;
}
#clear{
clear: both;
border: 1px solid pink;
}
#ps{
border: 2px solid red;
}
</style>
</head>
<body>
<div id="div1">我是div1的文本
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
<p id="clear">我是clear</p><!--行内元素的宽度和高度一般由内容决定-->
</div>
<div>
<span id="ps">span</span>
</div>
</body>
当初设计float时就是为了实现文字环绕的效果,所以文本级行内元素不会被遮挡住。
float属性的3个属性值:
1、left:左浮动
2、right:右浮动
3、none:不浮动
float属性的特点:
1、元素会左移或者右移直至容器的边缘。
2、设置float属性,元素会脱离标准文档流。
3、会对相邻元素产生影响,相邻元素特指紧接它后面的元素。
4、如果设置了float属性但是没有设置宽度和高度,会随内容的变化而变化。
可是float属性并不是彻底的脱离标准文档流,文本和行内元素是不会被遮挡住的
(文本不管怎样都会被显示出来的,有可能在用float属性设置过的div之后),彻底脱离标准文档流的方式是绝对定位。
清除浮动的两种方法:
版权声明:本文为T_hikHome原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。