HTML基础学习——浮动和定位

最新推荐文章于 2024-07-09 22:55:28 发布

qq_44980451

最新推荐文章于 2024-07-09 22:55:28 发布

阅读量576

点赞数 1

文章标签： html 学习前端

本文链接：https://blog.csdn.net/qq_44980451/article/details/125416594

版权

本文介绍了HTML中的浮动和定位概念。浮动主要用于让元素并排显示，可能导致文字环绕，而清除浮动则有多种方法，如overflow: hidden和使用clear属性。接着讲解了相对定位、绝对定位，相对定位保持元素在文档流中的位置，而绝对定位则脱离文档流。最后提到了粘性定位，当元素离开视口时，它会保持在屏幕的特定位置。

摘要由CSDN通过智能技术生成

1.浮动
文档流

标准文档流
类似于word文档的图片与文字显示

脱离标准文档流
作用：用于设置图片或盒子的显示方式：并排显示
影响：遮盖下一层元素，文字会环绕显示行内元素无法设置宽高，在设置浮动后会拥有块特性，可设置宽高。块级元素在设置浮动之后原本独占一行的特性消失根据宽高来占位置如图：
代码如下

<!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>Document</title>
    <style>
        .father{
           /* overflow: hidden; */
           width: 200px;
           background-color: yellow;
           /* zoom: 1; */
        }
        .one{
            width: 50px;
            height: 60px;
            background-color: skyblue;
            /* 大哥的浮动 */