CSS之浮动的两个应用

来源：互联网发布：意大利黑手党知乎编辑：程序博客网时间：2024/05/29 19:58

这里说明两个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;}

以下分别是：父容器不够宽以及各个div高不一致的情况，这里代码不再赘述。

注意最后这种情况，div4会与div3的下边界保持在一条线上。

0 0