（8）HTML&&CSS笔记（浮动*）

最新推荐文章于 2024-11-03 11:09:26 发布

沭瑾

最新推荐文章于 2024-11-03 11:09:26 发布

阅读量176

点赞数

文章标签： HTML CSS

本文链接：https://blog.youkuaiyun.com/xiaoma_666/article/details/97283071

版权

本文深入探讨了CSS中的浮动(float)概念，包括其工作原理、如何使元素脱离文档流并按指定方向移动，以及浮动可能导致的布局问题。同时，详细介绍了几种清除浮动的方法，如使用overflow:hidden、clear属性和伪元素，确保页面布局正确无误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、文档流：
它是在文档中（页面）可显示对象所占用的位置（空间）
脱离文档流：
在页面当中不占位置；
以往让盒子排成一行，我们使用的display:inline-block;
解析空格；
会产生基线对齐的情况。

2、浮动（float）
它使元素脱离文档流，按照指定（左右）方向发生移动。
遇到父级边界或相邻的浮动元素就停下来（往下掉）。
分类：
float：left；左浮动
float：right；右浮动

3、浮动的特殊情况：
（1）给前面的元素加浮动，后面的元素会占据它的位置；
（2）给前面的元素加浮动，只会影响后面的元素，不会对使用浮动元素的前一个元素造成影响；
（3）如果父级宽度不够，无法容纳所有浮动元素，无法容纳的元素会往下掉。
（4）如果浮动元素的高度不同，父级宽度不够，无法容纳的元素会卡在前面内容高度突出的。

在这里插入图片描述
4、浮动的特征
（1）使用浮动的元素会排成一行；
（2）使用浮动的内联样式会支持宽高，变为块级样式；
（3）使用浮动的样式，默认是由内容撑开宽度高度；
（4）支持margin，padding。但是不支持margin：auto；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            *{
            margin:0;
            padding:0;
        }
        .mydiv{
            width:600px;
            height:600px;
            background-color: #ff0;
            margin:100px auto 0;
        }
        .mydiv1{
            /* float:left; */
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .mydiv2{
            width:300px;
            height:300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class='mydiv'>
        <div class='mydiv1'>1111</div>
        <div class='mydiv2'>2222</div>
    </div>
</body>
</html>

5、清除浮动：使用浮动后，父级会出现坍塌的情况；
（1）overflow:hidden;超出的部分隐藏；
（2）在子级尾部加一个块元素，添加clear元素；
（3）伪元素（这种清除方式是固定写法）：

:after{
	content:' ';  /* 固定写法 */
	clear:both;
	display:block;
}

其中第二种写法会出现的问题如下（附图）：
当子元素左右两边都有浮动的话，在尾部追加的块级元素要清除两边的浮动，否则会有一边浮动未清除，对后边元素产生影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .father{
            list-style-type: none;
            width: 1100px;
            /* height:500px; */
            background-color: #f0f;
            border:12px solid #000;
            margin:100px auto 0;
            /* overflow: hidden; */
        }
        .children{
            /* float:left; */
            /* display: inline-block; */
            width: 200px;
            height: 200px;
            background-color: #09f;
            margin-right:10px;
        }
        .ch1{
            float: left;
        }
        .ch2{
            float:right;
        }
        h3{
            clear:both;
        }
    </style>
</head>
<body>
        <div class='father'>
        	<div class='children ch1'>1</div>
        	<div class='children ch2'>2</div>
        	<div class='children ch1'>3</div>
        	<div class='children ch2'>4</div>
        	<div class='children ch1'>5</div>
        	<h3></h3>
        </div>
</body>
</html>

在这里插入图片描述
6、圆角
border-radius:0px;
border-radius:50%;