CSS浮动-5.1浮动比较重要-使用folat属性来设置元素的浮动-left-right-none

最新推荐文章于 2022-08-26 08:23:53 发布

say hi.

最新推荐文章于 2022-08-26 08:23:53 发布

阅读量476

点赞数

本文链接：https://blog.csdn.net/qq_44280574/article/details/108307848

版权

为了满足html的多样化布局，我们就需要浮动来改变html元素默认的布局方式，使页面更加的美观。
【标准流布局：默认布局，如，div默认从上到下，span默认从左到右，放不下了，就放到下一行】

1.什么叫浮动
浮动是指将元素脱离文档流向左或者向右布局
使用folat属性来设置元素的浮动
默认值为none，也就是不浮动
还可以设置为left，表示向左浮动；或设置right，表示向右浮动

2.浮动的特点
一旦对元素设置浮动后，不论之前元素是内联元素还是块级元素，都会被当作块级元素处理
一旦对元素设置浮动之后，该元素便会脱离标准流，会造成其父元素的内容缺陷

例如：

.box { float:left; }
.box { float:right; }
.box { float:none; }

小例子：初步认识浮动

<!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>浮动</title>
    <style>
        .box {
            border: 1px solid #000;
        }
        .swim {
            width: 100px;
            height: 100px;
            background: yellow;

            /* float: left; */
            float:right;
        }
    </style>
</head>
<body>
    <div class="box">一天到晚游泳的鱼
        <div class="swim">我就是我</div>
    </div>
</body>
</html>