Html 浮动

浮动:使标签脱离标准流来定位;float
1 浮动元素不具备,独占一行的特性(”贴边”)

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


<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">div1div>
        <div class="two">div2div>
    body>
html>

没有浮动与浮动之后的执行结果:
Html 浮动_第1张图片
Html 浮动_第2张图片

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>

贴边与受阻隔的执行结果:
Html 浮动_第3张图片
Html 浮动_第4张图片

3 浮动不能覆盖文本(文字),字围效果


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

Html 浮动_第5张图片
“`

你可能感兴趣的:(HTML)