CSS之浮动的两个应用

最新推荐文章于 2024-08-31 20:43:54 发布

铛铛铛铛Huan

最新推荐文章于 2024-08-31 20:43:54 发布

阅读量976

点赞数

分类专栏： HTML/CSS 文章标签： html css

本文链接：https://blog.csdn.net/u010046318/article/details/53164642

版权

HTML/CSS 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

这里说明两个float 的使用场景：

这是float出现的本质原因，就是为了实现文字环绕效果;
在实际网站开发中，会经常出现多个div需放在一行的情况。

一、实现文字环绕效果的float

<!DOCTYPE html>
<html>
<head>
    <title>文字环绕效果</title>
    <style type="text/css">
        .box1{
            width:600px;
            margin:0px auto;
        }
        img{
            width:100px;
            height:70px;
            float:left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <img src="BaiduLogo.jpg" />
        <p>这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片这是百度的Logo图片</p>
    </div>
</body>
</html>

效果图如下：

但其实这是利用了浮动的破坏性，此外浮动还有个包裹性，即父元素容器的宽度与其里面的文字长度有关，下面一个程序可以体现破坏性和包裹性。

<!DOCTYPE html>
<html>
<head>
    <title>CSS浮动效果</title>
    <style type="text/css">
        .btn{
            display:inline-block;
            border:1px solid black;
            background-color:#CCCCCC;
        }
        .btn1{
            float:left;
            border:1px solid black;
            background-color:#CCCCCC;
        }
    </style>
</head>
<body>
    <div class="btn">
        按钮       
    </div>
    <span>包裹功能：即div容器的宽度随里面文字的长度而变化</span>
    <p>inline-block可以实现包裹</p>

    <div class="btn1">
        按钮2
    </div>
    <span>Float也有包裹功能</span>

    <p>但是float:left会影响到标准流中其他的元素的布局，即浮动的破坏性</p>

    <div class="btn">
        按钮       
    </div>
    <span>包裹功能：即div容器的宽度随里面文字的长度而变化</span>
    <div class="btn1">
        按钮2
    </div>
    <span>Float也有包裹功能</span>
</body>
</html>

效果如下：

二、

我们都知道div是块级元素，所以一个div会占用页面中的一行，那么如何使得多个div放在一行？方法有两种：

设置div的样式如下：

div{
   display:inline;
}

2. 利用浮动（常用的方法）

float：left;  /*应用此样式的元素会向左边和上边去靠，直到遇到边界为止。*/
/*float:right*/

情况一：利用float:left;使得所有的div放在同一行（父容器足够宽的情况）

<!DOCTYPE html>
<html>
<head>
    <title>浮动相关</title>
    <link rel="stylesheet" type="text/css" href="3.css">
</head>
<body>
    <div class="div1">
        <div class="b1">
            div1
        </div>
        <div class="b2">
            div2
        </div>
        <div class="b3">
            div3
        </div>
        <div class="b4">
            div4
        </div>
    </div>
</body>
</html>

3.css代码如下：

/*初始化*/
body{
    margin: 0px;
    padding:0px;
}

/*大盒子样式*/
.div1{
    margin-left:20px;
    margin-top:20px;
    width:950px;
    height:1000px;
    padding:20px;
    border:1px solid blue;
}

/*小盒子样式*/
.b1{
    width:200px;
    height:200px;
    float: left;
    border:1px solid red;
}

.b2{
    width:200px;
    height:200px;
    float: left;
    border:1px solid red;
}

.b3{
    width:200px;
    height:200px;
    float: left;
    border:1px solid red;
}

.b4{
    width:200px;
    height:200px;
    float: left;
    border:1px solid red;
}