[C1进阶之路-Web基础] 浮动

目录

☀️ float属性

☀️ clear属性

☀️ 浮动布局

💬题目01

💬题目02

💬题目03

💬题目04

💬题目05

---

🍹欢迎各路大佬来到 Nick 主页指点

☀️本期文章将学习 [C1进阶之路-Web基础] 浮动，我是博主Nick。✨

✨我的博客主页：Nick_Bears 🌹꧔ꦿ

🌹꧔ꦿ博文内容如对您有所帮助，还请给个点赞 + 关注 + 收藏✨

    

🍋 注：资料来源于C1进阶考试资料  

        

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

      

☀️ float属性

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

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

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

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

   

☀️ 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;
}

   
 

☀️ 浮动布局

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

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

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

<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>

      

💬题目01

📝 

现要求将main中的section元素在一行排列，请补全代码片段

<style>
    main {
        width: 500px;
    }
    section {
        width: 80px;
        height: 80px;
        margin: 10px;
        background-color: cadetblue;
        ___________: left;
    }
</style>
<main>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
</main>

    

key：float

     

💬题目02

📝 现有以下代码片段，要求实现box1和box2在同一行排列，box3排在box1和box2下方，补全代码片段

<style>
    .box1, .box2 {
        width: 300px;
        height: 500px;
        background-color: skyblue;
        float: left;
    }
    .box3 {
        width: 800px;
        height: 100px;
        background-color: #f51;
        ______: both;
    }
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

  

key：float

 

     

💬题目03

📝 现有以下代码，要求实现如图所示的文字环绕图片的效果，请补全代码片段

<style>
    .box {
        width: 300px;
    }
    img {
        width: 100px;
        margin-right: 20px;
        ________: left;
    }
    p {
        text-align: justify;
    }
</style>
<div class="box">
    <img src="./images/logo.png" alt="logo">
    <p>C站能力认证是由中国软件开发者网站CSDN制定并推出的一个能力认证标准, C站软件工程师能力认证模块包含：C1见习能力认证、C4专项能力认证、C5全栈能力认证，开发者们根据实际情况和目标选择适合自己的认证路径。</p>
</div>

  

key：float

      

💬题目04

📝 现有以下代码，在所有元素都在同一行显示的情况下，请问此时排在最左边的元素的类名为_____?

<style>
.box1, .box2, .box3 {
    width: 200px;
    height: 80px;
    background-color: slateblue;
    float: right;
    margin: 20px;
}
</style>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

  

key：box3

      

💬题目05

📝 现有以下代码，在所有元素都在同一行显示的情况下，请问此时排在最右边的元素的类名为_____?

    <style>
        .box1, .box2, .box3 {
            width: 200px;
            height: 80px;
            background-color: slateblue;
            margin: 20px;
        }
        .box1, .box3 {
            float: right;
        }
        .box2 {
            float: left;
        }
    </style>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>

  

key：box1