HTML中的元素浮动

最新推荐文章于 2022-08-22 23:23:39 发布

鲤鱼C c

最新推荐文章于 2022-08-22 23:23:39 发布

阅读量1k

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_48643318/article/details/126423561

版权

浮动

作用：大多数情况下，就是用来让元素横向排列，做一些水平布局

表现：浮动可以使一个元素向其父元素的左侧或则右侧移动

设置方法： float：none，left，right

none，默认值，元素默认在标准流(文档流/普通流)中排列

left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动

right，元素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动

浮动的特点：

1·元素设置浮动以后，会完全脱离文档流，不在占用文档流的位置

2·设置浮动以后元素会向其父元素的左侧或右侧移动

3·浮动元素默认不会从父元素移出

4·浮动元素向左或者向右移动时不会超过它前边的其他浮动元素

5·如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

6·浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

7·浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围

    <style>
.right{
    height: 100px;
    width: 100px;
    background-color: yellow;
    float: right;
}
.left{
    height: 100px;
    width: 100px;
    background-color: red;
    float: left;
}
.block{
    height: 200px;
    width: 200px;
    background-color: green;
}

    </style>
</head>
<body>
    <div class="right">右浮动</div>
    <div class="left">左浮动</div>
    <div class="block">我是块级元素，浮动元素不影响我在文档流中的位置</div>
</body>
</html>