浮动简介的使用方法

1什么是浮动

浮动主要是用于元素的水平布局，用来设置元素浮动，元素脱离文档流后，就不会具有在文档流中的特点设置浮动

float: ; 设置元素的浮动

可选值

          none  默认值，元素正常显示，不浮动

          left  元素向左浮动

          right  元素向右浮动

2设置float浮动特点

        1、设置元素浮动之后，元素会脱离文档流，元素原来在文档流中的位置，就不会存在

          下面的元素就会上移，挤上去

        2、设置元素浮动之后，元素会尽量的向左或者向右，向上进行移动，

        而且默认情况下，不会脱离父元素的范围

3浮动的演示

如图所示做到下面的效果

 做到上的的效果我们首先要先建一个div

用div包裹我们的列表标签如下图所示

<div id="warp">
        <div class="d1">
            <dl class="a">
                <dt>旅游资讯</dt>
                <dd>宾馆索引</dd>
                <dd>宾馆索引</dd>
                <dd>宾馆索引</dd>
                <dd>宾馆索引</dd>
                <dd>宾馆索引</dd>
                <dd>宾馆索引</dd>
                <dd>宾馆索引</dd>
                <dd>宾馆索引</dd>
            </dl>
       </div>

具体如何操作呢

首先我们要先去除默认样式用我们的通用选择器

*{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

设置最外面盒子的宽和高

#warp{
            width: 1080px;
            height: 198px;
        }

然后给里面要浮动的内容设置宽和高

选中浮动的内容设置左浮动如下图所示选中浮动的内容

  .d1{
            width: 1080px;
            height: 198px;
        }

        dd{
            width: 96px;
            height: 16px;
            float: left;
           margin-top: 12px;
           color: #666666;
           font-size: 12px;
            }
        dt{
            font-size: 20px;
            color: #333333;
        }

这样浮动就完成了

 注意设置足够的宽和高后期方便浮动调整