浮动基础知识

一、任务目标

理解CSS浮动属性

掌握浮动布局

二、任务背景

浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。后可用于所有元素，在页面布局中发挥重要作用。

三、任务内容

1、float属性

• 用于设置元素是否浮动，absolute（绝对）定位的元素会忽略float属性

元素浮动后会被移出正常的文档流，向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

• 下表为float可设置的属性值

属性值	描述
none	默认值，元素不浮动
left	元素左浮动
right	元素右浮动

2、clear属性

• 用于清除浮动，给元素清除浮动后，元素将会排在该元素之前的浮动元素下方

• 下表为clear可设置的属性值

属性值	描述
none	默认值，元素不浮动
left	清除左浮动
right	清除右浮动
both	清除左右两侧浮动

<style>
    .layout {
        width: 120px;
        height: 300px;
        margin: 10px;
        background-color: cadetblue;
        float: left;
    }
    .content {
        width: 340px;
        height: 300px;
        margin: 10px;
        background-color: powderblue;
        float: left;
    }
    footer {
        width: 500px;
        height: 40px;
        background-color: darkseagreen;
	}
</style>
<main>
    <section class="layout flex-center">侧边栏</section>
    <section class="content flex-center">内容</section>
</main>
<footer></footer>

在以上代码使用浮动实现两列布局中，main中的section都为浮动元素，main元素的高度为0无法被撑开

main后的footer元素在页面布局时无法在main后正常显示（如下图）

 

section元素左浮动，此时将footer元素左侧浮动清除，即可将footer元素置于main元素下方

/* 清除左右两侧浮动 */
footer {
	clear: both;
}
/* 或清除左侧浮动*/ 
footer {
	clear: left;
}

 

3、浮动布局

• 浮动在布局中最常用于实现两列布局或三列布局

在使用浮动属性实现三列布局的时候常用，左侧盒子左浮动，右侧盒子右浮动，中间的盒子左右外边距设置大于左右两侧盒子大小即可

以下为三列布局的简单实现代码

<style>
    main {
        width: 500px;
        height: 300px;
        margin: 50px;
    }
    .left {
        width: 100px;
        height: 300px;
        background-color: cadetblue;
        float: left;
    }
    .center {
        width: 300px;
        height: 300px;
        background-color: lightblue;
        margin: 0 100px;
    }
    .right {
        width: 100px;
        height: 300px;
        background-color: cadetblue;
        float: right;
    }
</style>

<main>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</main>