【HTML+CSS】浮动-float

芒果Cake

已于 2022-12-01 09:05:40 修改

阅读量340

点赞数

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

于 2022-11-21 19:00:44 首次发布

本文链接：https://blog.csdn.net/huangwfu/article/details/127970417

版权

HTML 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

浮动

float

默认是 none
左浮动 left
有浮动 right

浮动的规则
浮动的元素会半脱离文档流, 不占据页面空间, 不会遮挡下面的文字

浮动的元素会脱离文档流, 不占据页面空间, 不会遮挡下面的文字
浮动的元素会在父元素的限制范围内浮动
浮动的元素会在当前行框内进行浮动

<style>
        .box1{
            height: 100px;
            width: 100px;
            background-color: pink;
            float: left;
            border-radius: 10px;
            text-align: center;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: skyblue;
            float: left;
            border-radius: 12px;
            text-align: center;
        }
</style>
<div class="box1">box1</div>
    <p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1] 
        超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。 [1]
    </p>
<div class="box2">box2</div>

浮动的元素会在父元素的限制范围内浮动

<style>
        .bigBox {
            height: 600px;
            width: 300px;
            background-color: antiquewhite;
        }
        .box1 {
            height: 100px;
            width: 100px;
            background-color: pink;
            float: left;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: skyblue;
            float: left;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: orange;
            float: left;
        }
 </style>
    <div class=" bigBox">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>

浮动元素会在当前行框内进行浮动

<style>
        .box1 {
            height: 100px;
            width: 100px;
            background-color: pink;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: skyblue;
            float: right;
        }
        .box3{
            height: 300px;
            width: 300px;
            background-color: orange;
        }
</style>
		<div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

浮动的问题–高度塌陷

当父元素的高度靠子元素撑开的时候, 子元素全部浮动, 导致父元素没有高度, 此刻父元素高度塌陷,后果浮动布局失败
解决方案: 清除浮动

给父元素设置高度, 不推荐
给父元素设置overflow: hidden;
- 触发BFC, 计算BFC区域的高度, 浮动元素参与计算

<style>
        .father{
            width: 800px;
            /* height: 200px; */
            border: 10px solid #000;
            overflow: hidden;
        }
        .father div{
            width: 200px;
            height: 200px;
            border: 5px solid red;
            float: left;
        }
</style>
<div class="father">
        <div>1</div>
        <div>2</div>
        <div>3</div>
</div>

盒子模型

网页布局的三座大山

浮动
盒子模型
定位

盒子模型

计算元素在页面所占的空间
css规定, 所有的元素都为框, 所有的元素在页面都占据空空间

空间: 内容填充边框外边距内边距
width/height padding border margin padding

框: 矩形框
内容: content
- 宽高
- 文本内容
填充, 常叫做内边距, 也可以叫做留白, 补白, 内间距, padding
边框, border 边框会撑大盒子
外边距 margin

注意: 内容宽高文本, 内边距, 边框都会撑大盒子, 唯独外边距不会撑大盒子。但是盒子模型包括外边距, 可以使用盒子嵌套盒子的方式去理解。

<style>
        .father{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            margin: 10px;
            border: 10px solid black;
        }
</style>
    <div class="father">
        <div class="son"></div>
    </div>

内边距

padding

特征
属性值

padding的特征

位置: 位于内容content和边框border之间
padding是加给父元素, 调整子元素或者内容的位置
padding会撑大盒子
padding没有颜色, 背景颜色会覆盖到padding区域
在谷歌f12中盒子模型中是绿色
padding不支持负值

padding的属性

单边的内边距
- padding-方位词(top/right/bottom/left)
1-4边的内边距
- 一个值四边
- 两个值上下左右
- 三个值上左右下
- 四个值上右下左

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            padding: 10px 20px 30px 40px;
            padding: 10px 20px 30px;
            padding: 10px 20px;
            padding: 10px;
        }
</style>

小练习

<style>
        div{
            width: 245px;
            height: 220px;
            padding: 10px;
        }
        img{
            width: 245px;
            height: 220px;
        }
</style>
<div>
        <img src="../img/daxue.jpg" alt="">
</div>

不独占一行的元素只能添加左右边距, 不能添加上下边距

<style>
        .s2{
            padding: 30px;
            background-color: aqua;
        }
</style>
    <span class="s1">
        123123
    </span>
    <span class="s2">
        123123
    </span>