CSS(十三)float浮动

最新推荐文章于 2021-10-24 17:08:02 发布

MW0309

最新推荐文章于 2021-10-24 17:08:02 发布

阅读量2.8k

点赞数 1

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_42222342/article/details/104619265

版权

CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

float浮动

文档流

文档流是文档中可显示对象在排列时所占用的位置。

float特性

加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值

left
right
none（默认）
实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮动</title>
    <style>
        body{
            border: 1px black solid;
        }
        #box1{
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
        }
        #box2{
            width: 200px;
            height: 200px;
            background: red;
            float: right;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

效果图
在这里插入图片描述

float注意点

只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列。
主要给块元素添加，但也可以给内联元素添加。
实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮动注意点</title>
    <style>
        body {
            border: 1px black solid;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            width: 300px;
            height: 300px;
            border: 1px black solid;
        }
        li{
            width: 100px;
            height: 100px;
            background: red;
            border: 1px salmon solid;
            box-sizing: border-box;
            float: left;
        }
        li:nth-of-type(1){
            height: 120px;
        }
        li:nth-of-type(2){
            height: 80px;
        }
        span:last-of-type{
            float: right;
        }
/*
        #box1 {
            width: 100px;
            height: 100px;
            background: yellow;
        }
        #box2 {
            width: 200px;
            height: 200px;
            background: #ff90f6;
            float: left;
        }
        #box3 {
            width: 300px;
            height: 300px;
            background: #83ff86;
        }
        #box4 {
           background: #a4c3ff;
            float: left;
        }*/
    </style>
</head>
<body>
   <!-- <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">
        MWMWMWMMWMWMWMWMMWMWMMWMWMWMWMMWMWMWMWMMWMWMMW

        MWMWMWMMWMWMWMWMMWMWMMWMWMWMWMMWMWMWMWMMWMWMMW
    </div>
    <div id="box4">这是一个没有宽度的块级元素</div>-->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
   <span>aaaa</span><span>bbbb</span>
</body>
</html>