CSS 浮动(Float)-清除浮动（Clear）

置顶最好的人啊

已于 2022-09-01 11:36:53 修改

阅读量1.8k

点赞数 2

分类专栏： HTML 文章标签： css 前端 vscode css3 html

于 2022-06-22 22:34:33 首次发布

本文链接：https://blog.csdn.net/qq_52499703/article/details/125417530

版权

HTML 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

🚗个人主页：最好的人啊

🚌系列专栏：HTML/CSS

🚐推荐一款模拟面试、刷题神奇、从基础到大厂的面试题库，要想走上人生巅峰迎娶白富美赶快点击这个网站⚡不要犹豫，白富美在向你招手，快来注册吧！

一，什么是浮动

Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

二，元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

三，浮动（float）的属性

1.浮动的作用：

用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

2.float 属性可以设置以下值之一：

left 元素浮动到其容器的左侧
right 元素浮动在其容器的右侧
none 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

3. float: right;

实例：

浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            float: right;
        }
    </style>
</head>

<body>

    <h1>向右浮动</h1>

    <p>大兴活是讨，疾韩。</p>

    <p><img src="../project001/神十四火箭.webp" alt="wupian" >

        子行谋上我而听，俭活大次大陛流好，何木你化马你，
        洋以牙书妙说后死快以个得俭都修感回，虽后严褒不，人纯人却言说杨者答张首为会鼓可友非生，
        同而一法是谓到叹入，弟病下中王六，是历重于，
        丰李狂未畴况无并的，之事秦乐力帮承不慧只是迷褒就领，韩力他，二就招中几啦，法。</p>

</body>

</html>

4.float: left;

实例：

浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            float: left;
        }
    </style>
</head>

<body>

    <h1>向左浮动</h1>

    <p>大兴活是讨，疾韩。</p>

    <p><img src="../project001/神十四火箭.webp" alt="wupian" >

        子行谋上我而听，俭活大次大陛流好，何木你化马你，
        洋以牙书妙说后死快以个得俭都修感回，虽后严褒不，人纯人却言说杨者答张首为会鼓可友非生，
        同而一法是谓到叹入，弟病下中王六，是历重于，
        丰李狂未畴况无并的，之事秦乐力帮承不慧只是迷褒就领，韩力他，二就招中几啦，法。</p>

</body>

</html>

5.相邻的浮动元素

把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
.box 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}

</style>
</head>

<body>
<h3>图片</h3>
<p>即听使得过。</p>
<img class="box" src="../project001/神十四火箭.webp  "width="107" height="90">
<img class="box" src="../project001/神十四火箭.webp " width="107" height="80">
<img class="box" src="../project001/神十四火箭.webp " width="116" height="90">
<img class="box" src="../project001/神十四火箭.webp " width="120" height="90">
<img class="box" src="../project001/神十四火箭.webp  "width="107" height="90">
<img class="box" src="../project001/神十四火箭.webp " width="107" height="80">
<img class="box" src="../project001/神十四火箭.webp " width="116" height="90">
<img class="box" src="../project001/神十四火箭.webp " width="120" height="90">
</body>
</html>

四，清除浮动（clear）

1，clear 属性

`①clear` 属性可设置以下值：

none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

②在元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

使用 clear 属性往文本中添加图片廊：

实例

<!DOCTYPE html>
<html>

<head>
    <style>
        .div1 {
            float: left;
            width: 100px;
            height: 50px;
            margin: 10px;
            border: 3px solid #73AD21;
        }

        .div2 {
            border: 1px solid red;
        }

        .div3 {
            float: left;
            width: 100px;
            height: 50px;
            margin: 10px;
            border: 3px solid #73AD21;
        }

        .div4 {
            border: 1px solid red;
            clear: left;
        }
    </style>
</head>

<body>

    <h1>不使用 clear</h1>
    <div class="div1">div1</div>
    <div class="div2">div2 </div>
    <br><br>
    <!-- 在 HTML 代码中 div2 在 div1 之后。不过，由于 div1 向左浮动，div2 中的文本会流动到 div1 周围。 -->
    <h1>使用 clear</h1>
    <div class="div3">div3</div>
    <div class="div4">div4 </div>
    <!-- - 在此处，clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素。您也可以清除 "right" 和 "both"。 -->
</body>

</html>

2. clearfix Hack

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        div {
            border: 3px solid #4CAF50;
            padding: 5px;
        }

        .img1 {
            float: right;
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        .img2 {
            float: right;
        }
    </style>
</head>

<body>

    <p>在本例中，图像高于包含它的元素，然而它被浮动了，所以它会在容器之外溢出</p>

    <div>
        <h1>Without Clearfix</h1>
        <img class="img1" src="../project001/神十四火箭.webp" alt="" width="180" height="167">
        李落相之二，力战在。
    </div>

    <p style="clear:right">请为包含元素添加 clearfix hack，以解决此问题：</p>

    <div class="clearfix">
        <h1>With Clearfix</h1>
        <img class="img2" src="../project001/神十四火箭.webp" alt="" width="180" height="167">
        自不他价，极兄法又。
    </div>

</body>

</html>

结束语：

搏一搏单车变摩托🏍

前端面试神器（不只有前端嗷）-----> 好兄弟，为了梦想

 让我们一起进步，拿到自己想要的offer

最好的人啊

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS 浮动(Float)-清除浮动（Clear）

1.浮动的作用：用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。2.float属性可以设置以下值之一：left 元素浮动到其容器的左侧right 元素浮动在其容器的右侧none 元素不会浮动（将显示在文本中刚出现的位置）。默认值。inherit - 元素继承其父级的 float 值.........
复制链接

扫一扫