html5浮动的作用，为什么要设置浮动，怎样设置浮动和清除浮动。

最新推荐文章于 2024-07-09 22:55:28 发布

求根知底

最新推荐文章于 2024-07-09 22:55:28 发布

阅读量2.9k

点赞数 4

文章标签： html5 css css3

本文链接：https://blog.csdn.net/weixin_47241585/article/details/122598835

版权

首先在这里向大家介绍一下自己，我是一名在校大学生，由于主攻后端，软件工程师方向，所以对于前端不是很投入，只是学习一些基本的，今天我来给大家介绍一下我认识下的浮动。由于在几乎没有在博客里发表过文章，所以格式，美观性都不是很好，但知识你值得一看，如有错误的理解，敬请斧正!

浮动是用来干什么，它的作用是什么？
浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距。
布局网页并定位网页元素。
让块元素可以通过浮动来左右相邻。
浮动特性
支持所有的css样式.
内容撑开宽高(我感觉重中之重，重在理解).
多个元素设置浮动，会排在一排.
脱离文档流.
提升层级半级.
备注：A元素设置了浮动属性后，B元素就会无视这个元素的存在，但是B元素中的文本内容依然会为A元素让出位置使自身的文本内容（内容撑开宽高）环绕在设置浮动元素的周围
浮动-float属性
left 元素向左浮动 float:left
right 元素向右浮动 float:right
none 默认值，元素不浮动 float:none
消除浮动属性（由于浮动会影响周边的元素发生许多不能避免的问题，所以必要时要消除浮动）
left:左侧不允许浮动元素
right:右侧不允许浮动元素
both:左右都不允许
none:默认值。允许浮动元素出现在两侧
消除浮动的三种方式
这是每个元素的层叠样式表，后面只需要三种方式只需要调用他们的这个.css

test.css

@charset "utf-8";
/* .clear::after{
    content: '';
    clear: both;
    display: block;
} */
.head{
    border: 3px solid #000040;
}
.first{
    float: left;
    width: 100px;
    height: 100px;
    background: #00ff00;
}
.second{
    float: left;
    width: 130px;
    height: 130px;
    background: #800000;
}
.three{
    width: 150px;
    height: 150px;
    background: #8000ff;
}

第一种：使用带clear属性的空元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用带clear属性的空元素</title>
    <link rel="stylesheet" href="test.css">
    <style> 
        .clears {
	        clear:both;
            height:0;
        }
    </style>
</head>
<body>
<div class="head">
    <div class="first">
        我是块元素1，我有左浮动
    </div>
    <div class="second">
        我是块元素2，我有左浮动
    </div>
    <div class="clears"></div>
    <div class="three">
        我是块元素3，我没有浮动
    </div>
</div>
</body>
</html>

在这里插入图片描述
如果没加

<style> 
        .clears {
	        clear:both;
            height:0;
        }
    </style>

则会会影响块元素三的大小。
这个代码的意思就是清除左右的浮动，并且让高度为0，相当于一个空元素，只是为了清除浮动
在这里插入图片描述

第二种：使用CSS的overflow属性 hidden或者auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用CSS的overflow属性:</title>
    <link rel="stylesheet" href="test.css">
    <style>
        .head{
        overflow: hidden
    }
    </style>
</head>
<body>
    <div class="head">
        <div class="first">
            我是块元素1，我有左浮动
        </div>
        <div class="second">
            我是块元素2，我有左浮动
        </div>
    </div>
</body>
</html>

style 里面加的语句就是盒子满了的部分自动隐藏
如果不加
在这里插入图片描述

两个都是浮动元素，会造成脱离文档流，使盒子塌陷，所以加上style里面的样式清除浮动，他俩的高度自动被盒子包着
在这里插入图片描述
第三种使用CSS的 :after 伪元素:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用CSS的 :after 伪元素</title>
    <link rel="stylesheet" href="test.css">
    <style>
     .clear::after{
        content: '';
        clear: both;
        display: block;/*让他们又成为块元素*/
        height: 0;
    }
    </style>
</head>
<body>
<div class="head clear">
    <div class="first">
        我是块元素1，我有左浮动
    </div>
    <div class="second">
        我是块元素2，我有左浮动
    </div>
</div>
</body>
</html>

如果没加style里面的语句，则会脱离文档流
在这里插入图片描述
加了之后的结果显示，元素恢复块元素，重新进入盒子

以上就是我的认识
在我初学的时候，我感觉最重要的就是理解浮动，浮动用来干什么，怎样用，为什么要清除浮动，怎样清除，学习一定要重于理解，有时候不会的知识，可以一边实操一边理解，会有非常好的作用，程序员重在实操，纸上得来终觉浅，要下定决心弄懂必须实操。
浮动这里，重要的是如果A元素有浮动属性啦，紧接着B元素忽视这个A元素，他的高度计算时，起点是以忽视浮动元素之后的起点

@charset "utf-8";

.head{
    border: 3px solid #000040;
}
.first{
    float: left;
    width: 100px;
    height: 100px;
    background: #00ff00;
}
.second{
    /* float: left; */
    width: 200px;
    height: 200px;
    background: #800000;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="head">
        <div class="first">
            我是块元素1，我有左浮动
        </div>
        <div class="second">
            我是块元素2，我没有浮动
        </div>
    </div>
</body>
</html>

在这里插入图片描述

块元素2的起点时红色标记的地方，忽视浮动元素1.

以上就是我目前对浮动知识的认识，希望大家仔细看看，如有错误敬请斧正！

求根知底

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
html5浮动的作用，为什么要设置浮动，怎样设置浮动和清除浮动。

浮动元素的作用，为什么需要浮动元素，浮动元素带来的问题，我们又应该怎样消除浮动属性，这篇文章带大家了解浮动元素干什么，怎样干，如何利用好浮动元素
复制链接

扫一扫