CSS_float与文本的显示

来源:互联网 发布:caffe教程数据层视觉层 编辑:程序博客网 时间:2024/06/02 07:30

<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>

0 0
原创粉丝点击