浮动

最新推荐文章于 2024-06-02 10:00:00 发布

辰辰辰辰宸

最新推荐文章于 2024-06-02 10:00:00 发布

阅读量1.2k

点赞数 2

文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_43765641/article/details/126570330

版权

1、作用：让块属性元素排成一行。

让行属性元素支持设置宽高。

可让文字环绕其本身。

2、设置左浮动：float:left; (以父容器左边为开始位置)

设置右浮动：float:right; （以父容器右边为开始位置）

<!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>浮动</title>
    <style>
        .div1{
            width: 500px;
            height: 300px;
            background-color: aqua;
        }
        .div2-1{
            width: 100px;
            height: 100px;
            background-color: gold;
            /* 设置左浮动 */
            float: left;            
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2-1"></div>
        <div class="div2-1"></div>
        <div class="div2-1"></div>
        <div class="div2-1"></div>
    </div>
</body>
</html>

3、浮动存在的问题：父元素不设置高度情况下，高度由子元素撑开，一旦子元素设置浮动，父元素会失去高度进而影响后面元素布局。

解决方式：给父元素设置overflow:hidden;

动态向父元素后面添加一个clear:both;的块属性元素

4、使用浮动而不使用display:inline-block;转换成行块标签的原因：

代码换行默认有空隙。

一个移动，其他元素会跟着移动。

默认文本底部对齐。

<!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>浮动</title>
    <style>
        .div1{
            width: 500px;
            height: 300px;
            background-color: aqua;
        }
        .div2-1{
            width: 100px;
            height: 100px;
            background-color: gold;
            /* 设置左浮动 */
            /* float: left;             */
            
            /* 设置转换成行块标签  默认有空隙 */
            display: inline-block;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2-1">1</div>
        <!-- 行间引入css样式：单个元素移动，其他元素会跟着移动 -->
        <div class="div2-1" style="margin-top: 80px;">2</div>
        <!-- 行间引入css样式：默认文本底部对齐。 -->
        <div class="div2-1" style="font-size: 30px;">3</div>
        <div class="div2-1">4</div>
    </div>
</body>
</html>

辰辰辰辰宸

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
浮动

3、浮动存在的问题：父元素不设置高度情况下，高度由子元素撑开，一旦子元素设置浮动，父元素会失去高度进而影响后面元素布局。动态向父元素后面添加一个clear:both;4、使用浮动而不使用display:inline-block;2、设置左浮动：float:left;(以父容器左边为开始位置)设置右浮动：float:right;（以父容器右边为开始位置）解决方式：给父元素设置overflow:hidden;让行属性元素支持设置宽高。一个移动，其他元素会跟着移动。1、作用：让块属性元素排成一行。......
复制链接

扫一扫