布局属性之浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局属性浮动</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .box1{
            width:50px;
            height:50px;
            background-color:red;
            float:left;
        }
        .box2{
            width:50px;
            height:50px;
            background-color:green;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
<div class="box2"></div>
</body>
</html>

View Code

块级元素到一行显示，并且都可设置宽和高

脱标

即脱离标准文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动脱标</title>
    <style type="text/css">
        .box1{
            width:80px;
            height:80px;
            background-color:red;
            float: left;
        }
        .box2{
            width:100px;
            height:100px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div class="box1">小红</div>
    <div class="box2">小黄</div>
</body>
</html>

View Code

小红设置了浮动，脱离了文档标准流，这时小黄就是第一个元素，所以渲染到了最上面

span标签无需转换成块级元素就可设置宽高。

所有标签一旦设立浮动属性，就不区分行内元素和块级元素，以及行内块元素，还能设置宽和高。

相互贴靠

哪里有边贴那里，没有就贴body的边。

如左浮动：如果左边标签无浮动，那么该标签浮动则贴靠父级标签。如果左标签浮动，则紧靠左标签

如果没有足够空间，则自己紧靠父级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素相互贴靠</title>
    <style type="text/css">
        .box1{
            width: 50px;
            height: 50px;
            background-color:red;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color:green;
            float: left;
        }
        .box3{
            width: 150px;
            height: 150px;
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

View Code

有字围效果

当div浮动，p不浮动，p标签中的文字则围绕div标签。div层级提高，但p标签文字不会被遮挡。

div不设置浮动效果：

div添加左浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动字围效果</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        .log{
            float: left;
        }
        .box{
            border: 1px solid salmon;
            height:300px;
            width:500px;
            margin: 5px;

        }
    </style>
</head>
<body>
    <div class="box">
    <div class="log">
        <img src="img/jd.gif">
    </div>
    <p>京东是中国的综合网络零售商，是中国电子商务领域受消费者欢迎和具有影响力的电子商务网站之一，在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品、在线旅游等12大类数万个品牌百万种优质商品。
        京东在2012年的中国自营B2C市场占据49%的份额，凭借全供应链继续扩大在中国电子商务市场的优势。京东已经建立华北、华东、华南、西南、华中、东北六大物流中心，同时在全国超过360座城市建立核心城市配送站。
        2012年8月14日，京东与苏宁开打"史上最惨烈价格战" 。2013年3月30日19点整正式切换了域名，并且更换新的logo [1] </p>
    </div>
</body>
</html>

View Code

紧凑效果

设置宽和高，将自动收缩为文字宽度和高度

浮动带来的问题

子盒子浮动，父盒子不会被填充，需要给父盒子设置高度，使用较少。但是设置高度又不灵活，比如内容调整后需要重新设置高度。

清除浮动带来的影响：

给元素设置高度
内墙法：clear-both:给浮动元素最后面添加一个空的div，并且该div不浮动，然后设置clear:both。right右边不浮动，left左边不浮动，both两者都不浮动，clear清除后子元素会填充父盒子高度。问题：增加了额外的div元素。

伪元素清除法：给祖先元素添加一个clearfix（通常用该名）类名。常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素清除浮动</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul li{
            list-style: none;
            float: left;
            width: 80px;
            height: 40px;
            background-color: #FC4B38;
        }
        .content{
            width: 300px;
            height: 70px;
            background-color: #FFE4C4;
        }
        /*对最上层标签设置伪元素*/
        .clearfix:after{
            /*设置内容为空*/
            content:".";
            visibility: hidden;
            height: 0px;
            /*必须设置成块级元素*/
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
        <!--内墙方式清除浮动，但带来了多的div元素，一般不使用-->
        <!--<div style="clear: both;"></div>-->
    </div>
    <div class="content"></div>
</body>
</html>

View Code

overflow方法：给浮动元素父级元素添加voerflow:heiden属性

div内容超出大小后的设置

overflow属性对其进行控制

.content{
     width: 300px;
     height: 70px;
     background-color: #FFE4C4;
    /*超出部分隐藏*/
     overflow: hidden;
    /*浏览器根据内容自动添加或删除滚动条*/
     overflow: auto;
    /*继承父级元素的voerflow属性*/
     overflow: inherit;
    /*类似auto*/
    overflow: scroll;
}

View Code