零基础学习CSS(18)——float、clear

最新推荐文章于 2023-06-25 18:22:44 发布
最新推荐文章于 2023-06-25 18:22:44 发布
阅读量197 收藏
点赞数
分类专栏： 零基础学习Web开发 文章标签： css 前端 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43650934/article/details/121136611
版权

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

float：https://man.ilovefishc.com/pageCSS3/float.html
clear：https://man.ilovefishc.com/pageCSS3/clear.html
使用 float 可以使子元素浮动到父元素的左 / 右侧：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>实现多列布局</title>
    <style type="text/css">
        div.left {
            width: 50%;
            background-color: pink;
            float: left;
        }

        div.right {
            width: 50%;
            background-color: lightblue;
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse nulla molestiae eum, mollitia dolor
        repudiandae nobis ullam vero ipsum provident inventore reprehenderit. Molestiae cumque soluta tempore minus ad
        inventore dolore?</div>
    <div class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis alias sit
        cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
        assumenda at! Explicabo?</div>
</body>

</html>

另一种实现方法，使用 width:50% 设置：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>实现多列布局</title>
    <style type="text/css">
        div.left {
            width: 50%;
            background-color: pink;
            display: inline-block;
        }

        div.right {
            width: 50%;
            background-color: lightblue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="left">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse nulla molestiae eum, mollitia dolor
        repudiandae nobis ullam vero ipsum provident inventore reprehenderit. Molestiae cumque soluta tempore minus ad
        inventore dolore?</div><div class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis alias sit
        cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
        assumenda at! Explicabo?</div>
</body>

</html>

**解释：**这是因为在代码中的上下换行，会被解析为一个空格。当两个宽度都能容在一行中（类似于 width: 48% ），自然没问题。当我们设置为 50% 后，这个空格就会将第二个元素撑到下一行。
在这里插入图片描述
float 最开始的用法：围绕文字的浮动

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>float正八经的用法：围绕图片的文字浮动</title>
    <style type="text/css">
        img {
            width: 200px;
            float: left;
        }
    </style>
</head>

<body>
    <img src="cjk.jpg" alt="cjk">
    <div class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis alias sit
        cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
        assumenda at! Explicabo?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis
        alias sit
        cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
        assumenda at! Explicabo?</div>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
浮动元素会脱离正常的文档流：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>float会脱离正常的文档流</title>
    <style type="text/css">
        div.pink {
            background-color: pink;
            width: 100px;
            height: 100px;
        }

        div.lightblue {
            background-color: lightblue;
            width: 200px;
            height: 100px;
            float: left;  /* 浮动亮蓝色，会覆盖掉玉米丝色*/
        }

        div.cornsilk {
            background-color: cornsilk;
            width: 300px;
            height: 100px;
        }

        div.seagreen {
            background-color: seagreen;
            width: 400px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="pink"></div>
    <div class="lightblue"></div>
    <div class="cornsilk"></div>
    <div class="seagreen"></div>
</body>

</html>

在这里插入图片描述
如果你往 div 中添加文字，文字会环绕 div ，而不会去覆盖，从而实现文字环绕：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>float会脱离正常的文档流</title>
    <style type="text/css">
        div.pink {
            background-color: pink;
            width: 100px;
            height: 100px;
        }

        div.lightblue {
            background-color: lightblue;
            width: 200px;
            height: 100px;
            float: left;
        }

        div.cornsilk {
            background-color: cornsilk;
            width: 300px;
            height: 100px;
        }

        div.seagreen {
            background-color: seagreen;
            width: 400px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="pink"></div>
    <div class="lightblue"></div>
    <div class="cornsilk">文字会环绕cornsilk，不会覆盖前面的lightblue</div>
    <div class="seagreen"></div>
</body>

</html>

在这里插入图片描述
总结：浮动元素对于文本和行内元素，采取的是“被环绕”，而对于块级元素，采取的是“覆盖”。

float允许修改元素的显示样式：
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>float会改变显示样式</title>
    <style type="text/css">
        span {
            width: 200px;
            margin: 100px;
            padding: 20px;
            background-color: pink;
            border: 5px solid lightblue;
            float: left;
        }
    </style>
</head>

<body>
	<!-- span为行内元素，无法设置width和margin，float后就可以设置 -->
    <span>>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis alias sit
        cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
        assumenda at! Explicabo?</span>
</body>

</html>

在这里插入图片描述
float 实现多列布局：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>float会改变显示样式</title>
    <style type="text/css">
        div.left {
            background-color: pink;
            width: 50%;
            float: left;
        }

        div.right {
            background-color: lightblue;
            width: 50%;
            float: right;
        }
    </style>
</head>

<body>
    <h1>两列布局演示</h1>
    <div class="left">
        <h2>右侧列巴拉巴拉</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis
            itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque quis
            obcaecati
            adipisci?</p>
    </div>
    <div class="right">
        <h2>右侧列巴拉巴拉</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis obcaecati,
            illo
            ex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
    </div>
</body>

</html>

在这里插入图片描述
默认情况下的宽度都是元素内容的宽度。若要加上 paddding，这样就使宽度超过整体父元素的 50%，就变成了两行。如果设置 box-sizing 属性值为 border-box，那么宽度就包含到边框的位置：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>float会改变显示样式</title>
    <style type="text/css">
        div.left {
            background-color: pink;
            width: 50%;
            float: left;
            padding: 20px;
            box-sizing: border-box;
        }

        div.right {
            background-color: lightblue;
            width: 50%;
            float: right;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <h1>两列布局演示</h1>
    <div class="left">
        <h2>右侧列巴拉巴拉</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis
            itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque quis
            obcaecati adipisci?</p>
    </div>
    <div class="right">
        <h2>右侧列巴拉巴拉</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis
            obcaecati,illoex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
    </div>
</body>

</html>

在这里插入图片描述
三列布局样式：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>float会改变显示样式</title>
    <style type="text/css">
        div.left {
            background-color: pink;
            width: 33.33%;
            float: left;
            padding: 20px;
            box-sizing: border-box;
        }

        div.middle {
            background-color: cornsilk;
            width: 33.33%;
            float: right;
            padding: 20px;
            box-sizing: border-box;
        }

        div.right {
            background-color: lightblue;
            width: 33.33%;
            float: right;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <h1>三列布局演示</h1>
    <div class="left">
        <h2>右侧列巴拉巴拉</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque
            quis obcaecati adipisci?</p>
    </div>
    <div class="middle">
        <h2>中间列巴拉巴拉</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque
            quis obcaecati adipisci?</p>
    </div>
    <div class="right">
        <h2>右侧列巴拉巴拉</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis obcaecati,
            illo ex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
    </div>
</body>

</html>

在这里插入图片描述
利用 clear 清除浮动，使得 footer 归位：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>float会改变显示样式</title>
    <style type="text/css">
        div.left {
            background-color: pink;
            width: 33.33%;
            float: left;
            padding: 20px;
            box-sizing: border-box;
        }

        div.middle {
            background-color: cornsilk;
            width: 33.33%;
            float: left;
            padding: 20px;
            box-sizing: border-box;
        }

        div.right {
            background-color: lightblue;
            width: 33.33%;
            float: right;
            padding: 20px;
            box-sizing: border-box;
        }
        footer {
            clear: left;
        }
    </style>
</head>

<body>
    <h1>三列布局演示</h1>
    <div class="left">
        <h2>右侧列巴拉巴拉</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque
            quis obcaecati adipisci?</p>
    </div>
    <div class="middle">
        <h2>中间列巴拉巴拉</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint animi harum minima
            veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque
            quis obcaecati adipisci?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est exercitationem sint
            animi harum minima
            veritatis itaque asperiores numquam cupiditate, odio ad nobis tempore doloribus facilis. Inventore itaque
            quis obcaecati adipisci?</p>
    </div>
    <div class="right">
        <h2>右侧列巴拉巴拉</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque natus ducimus, corporis veritatis obcaecati,
            illo ex nemo corrupti dicta a iusto totam in nostrum. Accusamus fugit ut magnam facilis facere!</p>
    </div>
    <footer>
        <p>Posted by: 鱼C工作室</p>
        <p>Contact information: <a href="mailto:someone@example.com">fishc_service@126.com</a>.</p>
    </footer>
</body>

</html>

在这里插入图片描述
未 clear 的结果：中间文本较长，footer 浮动于其旁边：
在这里插入图片描述
上文的 lightblue 覆盖 cornsilk，使用 clear 使浮动到此为止：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>cornsilk的浮动到此为止</title>
    <style type="text/css">
        div.pink {
            background-color: pink;
            width: 100px;
            height: 100px;
        }

        div.lightblue {
            background-color: lightblue;
            width: 200px;
            height: 100px;
            float: left;
        }

        div.cornsilk {
            background-color: cornsilk;
            width: 300px;
            height: 100px;
            clear: both;
        }

        div.seagreen {
            background-color: seagreen;
            width: 400px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="pink"></div>
    <div class="lightblue"></div>
    <div class="cornsilk">cornsilk的浮动到此为止</div>
    <div class="seagreen"></div>
</body>

</html>

在这里插入图片描述

Dragon水魅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS——float属性及Clear:both备忘笔记
09-25
CSS的float属性，作用就是改变块元素对象的默认显示方式，HTML标签设置了float属性之后，它将不再独自占据一行，从而可以实现多个元素同处一行的效果，所以需要在样式定义的后面进行清除浮动
css——之三行三列等高布局图文教程
10-30
CSS三行三列等高布局图文教程 本文将详细介绍如何使用CSS实现三行三列等高布局，并提供了详细的图文教程。 一、创建结构 首先，我们需要创建一个基本的HTML结构，包括header、container和footer三个部分。 ```...
零基础学习HTML(4)——style标签的使用
qq_43650934的博客
12-25 4880
文章目录官方资料学习正文 注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php 官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 &l...
零基础学习HTML(26)——audio标签、track标签
qq_43650934的博客
10-07 527
注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php 官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 audio标签：https://man.ilovefishc.com/pageHTML5/audio.html track标签：https:/
零基础学习HTML(1)——第一个程序
qq_43650934的博客
12-21 311
官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 <!--html5这么写注释--> <!DOCTYPE html> <!--声明文档类型--> &lt...
CSS布局—— float布局和flex布局
weixin_44422620的博客
03-05 2217
float布局和flex布局
CSS基础学习——浮动float、盒子模型
qq_41890177的博客
07-20 764
一、什么是浮动？ 浮动（float）就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。 二、浮动的原理 就是让元素脱离文档流，不占用标准流。 三、浮动的属性 float:left：左浮动 float:right：右浮动 float:none：默认值，不浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t..
网页制作基础学习——HTML+CSS常用代码
热门推荐
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
CSS——float，clear样式属性
YXX_decsdn的博客
05-20 452
float，clearfloat样式属性为什么使用float怎么使用floatfloat的简单使用消除浮动clear样式属性消除浮动方法1消除浮动方法2 float样式属性 设置元素浮动方向， 该属性有多个值： 为什么使用float float样式属性：HTML代码编写过程中需要注意代码规范，代码错落有致即是其中最基本的要求，但是浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会...
CSS基础知识（三）——Float Position flex布局
最新发布
weixin_54799350的博客
06-25 1223
介绍了CSS中的 float、position、flex三种布局以及BFC的有关知识，重点在于解决父元素高度塌陷的问题。
CSS基础——浮动（float）【学习笔记】
lilien的博客
11-21 2221
1. 浮动(float) 1.1 CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em等 浮动 让盒子从普通流中浮起来,主要作用让多个块级
CSS之float和clear
m0_48796380的博客
03-17 814
文章目录CSS之float和clear一、Float属性高度坍塌解决办法方法一：方法二：方法三：字围现象二、Clear属性 CSS之float和clear 盒子布局是现在较为流行的网页布局方式，最近的几道经典面试题都与float及clear有关。“float是魔鬼，会影响其他相邻元素；但是clear是小白，其智慧影响自身，不会对其他相邻元素造成影响”——某位大牛 一、Float属性 float就是浮动，让元素脱离文档流，让元素漂浮起来，和普通的文档流不在同一个层面上。float是将元素左右移动而不能上下
HTML+CSS大作业——vivo官方商城
07-08
7. **浮动与清除**：传统布局中可能使用float来实现流式布局，同时需要理解clear来避免浮动元素的影响。 8. **定位（positioning）**：static、relative、absolute、fixed等定位方式用于精确控制元素的位置。 在这...
CSS教程——元素定位
06-09
CSS 元素定位教程 一、什么是 CSS 元素定位？ CSS 元素定位是指在 HTML 文档中对元素的位置进行控制和设置的过程。通过使用 position 属性，可以将元素定位到特定的位置，以实现布局和设计的需求。 二、position ...
零基础学习HTML(25)——video标签
qq_43650934的博客
10-07 2155
注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php 官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 video标签：https://man.ilovefishc.com/pageHTML5/video.html <!DOCTYPE ht
零基础学习HTML(10)——striong标签、b标签、em标签、i标签、del标签、ins标签、s标签、u标签、mark标签、sup标签、sub标签、samll标签
qq_43650934的博客
08-14 1453
文章目录官方资料学习正文 注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php 官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 strong标签：https://man.ilovefishc.com/pageHTML5/strong.html
零基础学习HTML(11)——ul标签、ol标签、dl标签
qq_43650934的博客
08-15 978
文章目录官方资料学习正文 注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php 官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 ul标签：https://man.ilovefishc.com/pageHTML5/ul.html ol标签：htt
零基础学习HTML(12)——table标签（上）
qq_43650934的博客
08-17 937
文章目录官方资料学习正文 注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php 官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 table标签：https://man.ilovefishc.com/pageHTML5/table.html &l
零基础学习HTML(5)——link、base标签的使用
qq_43650934的博客
05-27 919
文章目录官方资料学习正文 注：学习笔记基于小甲鱼学习视频，官方论坛：https://fishc.com.cn/forum.php 官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值