前端基础 - float浮动和position定位

最新推荐文章于 2024-02-20 15:07:18 发布

vinoMamba0908

最新推荐文章于 2024-02-20 15:07:18 发布

阅读量338

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_38091402/article/details/105852443

版权

float浮动

基础知识

会使元素左右移动，但不能上下移动
浮动元素碰到另一个浮动元素，浮动停止
浮动元素之后的元素将围绕他，之前的不受影响
浮动会脱离标准流

语法

float：left
float：right

清除浮动

clear：none | left | right | both

方法一：在浮动元素之后使用一个空元素

    <style>
        .clear {
            clear:both;
        }
    </style>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="clear"></div>

方法二：给浮动元素的父容器添加 overflow：hidden

    <style>
        .box {
            overflow:hidden;
            //兼容低版本浏览器
            zoom:1;
        }
    </style>
    <div class="box">
        <div class="list1"></div>
        <div class="list2"></div>
    </div>

方法三：使用CSS3的 :after 伪元素

    <style>
        .clearfix:after {
            content:'';
            display:block;
            height:0;
            visibility:hidden;
            clear:both;
        }
        //兼容低版本IE浏览器
        .clearfix {
            zoom:1;
        }
    </style>
    <div class="box clearfix">
        <div class="list1"></div>
        <div class="list2"></div>
    </div>

定位position

position属性

static
relative
absolute
fixed
sticky
inherit

1)static

在这里插入图片描述

2)relative

在这里插入图片描述

box-sizing属性

允许以特定的方式定义匹配某个区域的特定元素

属性

inherit：规定从父元素继承box-sizing属性
content-box：在宽度，高度之外绘制元素的内边距和外框
border-box：通过从已经设定的宽度高度中分别减去内边距和边框的值，才是内容的宽度和高度

        <style>
        .box {
            width: 200px;
            margin: 0 auto;
        }
        .list1 {
            width: 100px;
            height: 100px;
            padding: 10px;
            background-color: blueviolet;
            border: 10px solid black;
            //border-box
            box-sizing: border-box;
        }
        .list2 {
            width: 100px;
            height: 100px;
            padding: 10px;
            background-color: brown;
            border: 10px solid gray;
            //content-box
            box-sizing: content-box;
        }
    </style>
    <div class="box">
        <div class="list1"></div>
        <div class="list2"></div>
    </div>