<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="margin:0px;">
更换即可
<h1>div的布局属于流布局,换语句话说,它是自上而下的布局方式</h1>
<div style="width:400px; height:100px; background-color:Red;"></div>
<div style="width:300px; height:100px; background-color:Blue">
</div>
<h1>两个div都靠左浮动,则可以在同一行中显示</h1>
<div style="width:400px; height:100px; background-color:Red; float:left;"></div>
<div style="width:400px; height:100px;background-color:Green; float:left;">要想实现浮动,就要使用float属性,让其漂浮到指定位置如左,右</div>
<div style="width:300px; height:100px; background-color:Blue; clear:both;">如果下层不想浮动,恢复文本流的正常显示,则需要添加属性:clear:both清除以上浮动</div>
<h1>上层浮动,下次不浮动,相当于上层浮起来,下层在下面</h1>
<div style="width:400px; height:100px; background-color:Red; float:left">我是上面的层的文字</div>
<div style="width:500px; height:100px;background-color:Green;">我是下面的层的文字</div>
<h1>浮动与文本显示:当下面层右侧没有被完全覆盖,则下面层文字可以显示在下面层显示的第一位置</h1>
<div style="width:400px; height:100px; background-color:Red; float:left">我是上面的层的文字</div>
<div style="width:500px; height:100px;background-color:Green;">我是下面的层的文字</div>
<h1>浮动与文本显示:当下面层左侧没有被完全覆盖,则下面层文字可以显示在最大覆盖面积(两层相加)下面的第一个位置</h1>
<div style="width:400px; height:200px; background-color:Red; float:left; margin-left:200px; ">我是上面的层文字</div>
<div style="width:500px; height:100px;background-color:Green;">我是下面的层的文字</div>
</body>
</html>
CSS_float与文本的显示
最新推荐文章于 2022-06-22 20:56:40 发布