【原】div布局的浮动float，clear，inline-float

融水公子 2018-09-10

展开全文

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float与clear</title>
    <style>
        div.div1{
            background-color: lightgreen;
        }
        div.div2{
            background-color: burlywood;
        }
        div.div3{
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
<h1>float与clear</h1>
<div class="div1">一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了</div>
<div class="div2">所以出现了更加简单的 inline-block属性实现一行多个block</div>
<div class="div3">使用float并列div1与div2，div3在下面</div>
</body>
</html>

结果：这是没加float属性的时候

添加样式后：

<style>
    div.div1{
        background-color: lightgreen;
        width: 100px;
        float: left;/*浮动在左边*/
    }
    div.div2{
        background-color: burlywood;
        width: 100px;
        float: left;/*浮动在左边*/
    }
    div.div3{
        background-color: lightskyblue;
    }
</style>

 
高度不一样，怎么把div3放在div1与div2下面？
看代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float与clear</title>
    <style>
        div.div{
            width: 400px;
        }
        div.div1{
            background-color: lightgreen;
            width: 200px;
            float: left;/*浮动在左边*/
        }
        div.div2{
            background-color: burlywood;
            width: 200px;
            float: left;/*浮动在左边*/
        }
        div.div3{
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
<h1>float与clear</h1>
<div class="div">
    <div class="div1">一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了</div>
    <div class="div2">所以出现了更加简单的 inline-block属性实现一行多个block</div>
    <div class="div3">使用float并列div1与div2，div3在下面</div>
</div>
</body>
</html> 
div1 div2 div3的文字太短不具有代表性，换个长一点的就会出现这样的结果： 
看到了吧就是这么奇特的半包围结构  那么问题来了  如何把div3排布的有点颜值？
看代码：
主要是让div3不受影响 在div3样式加上
div.div3{
            background-color: lightskyblue;
            clear: both;
        }
----------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float与clear</title>
    <style>
        div.div{
            width: 400px;
        }
        div.div1{
            background-color: lightgreen;
            width: 200px;
            float: left;/*浮动在左边*/
        }
        div.div2{
            background-color: burlywood;
            width: 200px;
            float: left;/*浮动在左边*/
        }
        div.div3{
            background-color: lightskyblue;
            clear: both;
        }
    </style>
</head>
<body>
<h1>float与clear</h1>
<div class="div">
    <div class="div1">一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  </div>
    <div class="div2">所以出现了更加简单的 inline-block属性实现一行多个block 所以出现了更加简单的 inline-block属性实现一行多个block</div>
    <div class="div3">使用float并列div1与div2，div3在下面  在这个娱乐至死的时代，信息化发展迅猛，人们的生活方式也变得多姿多彩。与此同时，人们对娱乐的追求也变得越来越奇特，以致于有些老一辈的人感叹道：“时代不同，娱乐也就不同啊！ 9月可以说是风云迭起，，一波未平一波又起，刘强东事件没发生几日。中国电商巨头马云又正式宣布阿里巴巴退出美国市场。这个消息的发布也就是说明阿里云，将不再把美国市场当成核心业务主要进行经营，而是无限期的放弃美国市场！ 其实这个决定作为国人来说是相当支持的，与其让美国再三刁难，还不如豁达一点，选择主动放弃！毕竟中华民族是一个有血性的民族。</div>
</div>
</body>
</html> 
但是上面的方法都比较老了
下面教大家一个新的方法：
inline-float
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style>
        div.div1{
            background-color: lightgreen;
            width: 200px;
            display: inline-block;
        }
        div.div2{
            background-color: burlywood;
            width: 200px;
            display: inline-block;
        }
        div.div3{
            width: 400px;/*div1 div2的总宽度*/
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
<h1>inline-block</h1>
<div class="div">
    <div class="div1">一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  </div>
    <div class="div2">所以出现了更加简单的 inline-block属性实现一行多个block 所以出现了更加简单的 inline-block属性实现一行多个block</div>
    <div class="div3">使用float并列div1与div2，div3在下面  在这个娱乐至死的时代，信息化发展迅猛，人们的生活方式也变得多姿多彩。与此同时，人们对娱乐的追求也变得越来越奇特，以致于有些老一辈的人感叹道：“时代不同，娱乐也就不同啊！ 9月可以说是风云迭起，，一波未平一波又起，刘强东事件没发生几日。中国电商巨头马云又正式宣布阿里巴巴退出美国市场。这个消息的发布也就是说明阿里云，将不再把美国市场当成核心业务主要进行经营，而是无限期的放弃美国市场！ 其实这个决定作为国人来说是相当支持的，与其让美国再三刁难，还不如豁达一点，选择主动放弃！毕竟中华民族是一个有血性的民族。</div>
</div>
</body>
</html>
运行的结果： 
inline-float对齐方式是底部对齐
那么怎么把div2顶部对齐呢？
只需要
div.div2{
    background-color: burlywood;
    vertical-align:top;
    width: 200px;
    display: inline-block;
}
就行了 
完整的代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style>
        div.div1{
            background-color: lightgreen;
            width: 200px;
            display: inline-block;
        }
        div.div2{
            background-color: burlywood;
            vertical-align:top;
            width: 200px;
            display: inline-block;
        }
        div.div3{
            width: 400px;/*div1 div2的总宽度*/
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
<h1>inline-block</h1>
<div class="div">
    <div class="div1">一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  一行中并列显示多个block 以前要使用要使用float与position 属性 但是复杂了  </div>
    <div class="div2">所以出现了更加简单的 inline-block属性实现一行多个block 所以出现了更加简单的 inline-block属性实现一行多个block</div>
    <div class="div3">使用float并列div1与div2，div3在下面  在这个娱乐至死的时代，信息化发展迅猛，人们的生活方式也变得多姿多彩。与此同时，人们对娱乐的追求也变得越来越奇特，以致于有些老一辈的人感叹道：“时代不同，娱乐也就不同啊！ 9月可以说是风云迭起，，一波未平一波又起，刘强东事件没发生几日。中国电商巨头马云又正式宣布阿里巴巴退出美国市场。这个消息的发布也就是说明阿里云，将不再把美国市场当成核心业务主要进行经营，而是无限期的放弃美国市场！ 其实这个决定作为国人来说是相当支持的，与其让美国再三刁难，还不如豁达一点，选择主动放弃！毕竟中华民族是一个有血性的民族。</div>
</div>
</body>
</html>
分享知识，分享快乐！希望中国站在编程之巅！
               ----融水公子
公众微信号：rsgz520
360图书馆馆号：rsgz002.360doc.com