Html 浮动

来源：互联网发布：ug电极自动编程编辑：程序博客网时间：2024/06/03 23:22

浮动：使标签脱离标准流来定位；float
1 浮动元素不具备，独占一行的特性（”贴边”）

定义两个块级元素div1、div2都向左浮动；代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            .one{                height: 100px;                width: 100px;                background-color: red;                /*向左浮动*/                float: left;                        }            .two{                height: 100px;                width: 100px;                background-color: gray;                float: left;            }        </style>    </head>    <body>        <div class="one">div1</div>        <div class="two">div2</div>    </body></html>

没有浮动与浮动之后的执行结果：

2 标准流的块级元素会阻隔浮动层元素”贴边效果”的连续性

修改上面代码如下：

<style type="text/css">            .one{                height: 100px;                width: 100px;                background-color: red;                /*向左浮动*/                /*float: left;*/                        }            .two{                height: 50px;                width: 100px;                background-color: gray;                float: left;            }        </style>

贴边与受阻隔的执行结果：

3 浮动不能覆盖文本（文字），字围效果

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            .one{                height: 100px;                width: 100px;                /*向左浮动*/                float: left;                        }            .two{                height: 50px;                /*width: 100px;*/                /*background-color: gray;*/                /*float: left;*/                text-indent: 2em;            }        </style>    </head>    <body>        <div>            <div class="one">                <img src="img/1.jpg" height="100px" width="100px">            </div>            <div class="two">5月27日下，"2017中国电子商务创新发展峰会"电商物流分论坛在贵阳市隆重举行。本次论坛由中国网络电视台、贵阳市人民政府主办，中国社会科学评价中心协办。论坛以"智慧链接，共创绿色物流新生态"为主题，探讨了在后“互联网+”时代如何加快推进末端配送体系的完善，带动体验电商和用户服务的创新，打造全新物流生态圈，引领物流行业新发展</div>        </div>    </body></html>

字围效果
“`

阅读全文

0 0