前端基础（五）------浮动与定位

最新推荐文章于 2024-09-30 15:42:36 发布

零度℃192

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量272

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_70761095/article/details/128501047

版权

本文详细介绍了前端开发中的浮动和定位概念。浮动主要讨论了如何使元素脱离原始位置，实现水平排列以及图文环绕布局，同时提到了浮动导致的父元素高度塌陷问题和解决方案。定位部分阐述了相对定位、绝对定位和固定定位的特性，以及如何利用定位实现元素的精确放置。文章还提及了定位在居中布局中的应用，并预告了关于Z-index和层级的案例分析。

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

1.浮动

浮动可以使一个元素脱离自己原本的位置，并在父元素的内容区中向左或向右移动，直到碰到父元素内容区的边界或者其它浮动元素为止。主要用于设置块元素的水平排列。属性：float

值	描述
left	元素向左浮动
right	元素向右浮动

元素设置浮动会从原始位置脱流，在文档中不再占位。

文档流：浏览器在渲染显示网页内容的时候采用的一套排版规则

块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素：从左往右，水平布局，

<style>
    .parent {
        width: 800px;
        height: 400px;
        border: 10px solid blue;
    }

    .box1 {
        width: 250px;
        height: 80px;
        background-color: #ed7d31;
    }

    .box2 {
        width: 400px;
        height: 100px;
        background-color: #70ad47;
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: #7030a0;
    }
</style>

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

浮动之后的文档流

<style>
    .parent {
        width: 800px;
        height: 400px;
        border: 10px solid blue;
    }

    .box1 {
        float: left;
        width: 250px;
        height: 80px;
        backgr