浮动

最新推荐文章于 2023-03-12 16:05:12 发布

qq_32809729

最新推荐文章于 2023-03-12 16:05:12 发布

阅读量215

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_32809729/article/details/73826314

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这一小节课我们为大家介绍网页布局中常用的布局手段——浮动（float）：

1.我们在这一小节需要完成类似下图的网页布局

常见的上中（左，右）下结构
头部标题
中部分两块，左边导航，右边内容
网页底部

2.通过之前的学习，我们会使用四个div作为html的内容，或者更加有层次一点，将中间的部分用一个div包裹起来，代码如下：

<body>
    <!--网页整体容器-->
    <div id = "container">
        <!--上-->
        <div id="header">头部标题</div>
        <!--中-->
        <div id="content">
            <!--左-->
            <div id="left">
                左侧导航
            </div>
            <!--右-->
            <div id="right">
                内容
            </div>
        </div>
        <!--下-->
        <div id="footer">网页底部</div>
    </div>
</body>

3.然后我们会利用学过的CSS知识为各div设置大小，背景色等，代码如下：

*{
margin: 0;
    padding: 0;
    font-size: 20px;
    color:#fff;
}
 /*网页容器给定大小与背景色*/
#container{
    background-color: #CCC;
    width: 100%;
    height:700px;
}
 /*网页头部给定大小与背景色*/
#header{
    background-color: black;
    width: 100%;
    height: 50px;
}
 /*网页内容给定大小*/
#content{
    width: 100%;
    height:550px
}
 /*内容左侧给定大小与背景色*/
#content #left{
    width: 20%;
    height: 100%;
    background-color: green;
}
 /*内容右侧给定大小与背景色*/
#content #right{
    width: 80%;
    height:100%;
    background-color: blue;
}
 /*内容底部给定大小与背景色*/
#footer{
    width: 100%;
    height:100px;
    background-color: red
}

4.当我们写完代码，运行的时候却发现得到了出乎意料的结果：

这里写图片描述

截图中我们发现蓝色部分并没有按照我们想要的方式排列在绿色部分的右边，而是换行式地跑到了下面，结合上节课我们学习的元素类型，我们可以知道，因为div是块级元素，有独占一行的特点，为了解决这个问题，达到布局的效果，我们在CSS代码中给绿色部分与蓝色部分添加float:left
作用：使元素脱离文档流，进行左对齐的排列方式

 /*添加了一行代码*/
#content #left{
    width: 20%;
    height: 100%;
    background-color: green;
    float:left
}
 /*添加了一行代码*/
#content #right{
    width: 80%;
    height:100%;
    background-color: blue;
    float:left
}