CSS浮动

孙景荣

已于 2023-01-28 16:16:18 修改

阅读量58

点赞数

分类专栏： CSS 文章标签： css 前端

于 2022-09-30 16:13:06 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127125181

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的浮动属性，包括left、right和none三种值，以及浮动元素如何脱离文档流并寻找空间。通过示例展示了浮动如何使元素在水平方向上排列。此外，还利用浮动特性实现了一个简单的导航栏，展示了如何设置导航链接并实现鼠标悬停效果。

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

一、浮动

1、属性:float
2、属性值:left、right、none
3、特点：浮动只能控制元素在水平方向上移动；设置浮动会使元素脱离文档流
4、浮动停止条件：设置浮动后元素会飘起来，碰到包含框(父级元素)就会停止浮动；碰到前面一个含有浮动属性的元素也会停止浮动；当子级元素大于父级宽度的时候，会往下移动直至找到足够的空间
示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: blue;
            float: left;
        }
        .box3{
            width: 300px;
            height: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">小盒子1111</div>
        <div class="box2">小盒子2222</div>
        <div class="box3">小盒子3333</div>
    </div>
</body>
</html>

在这里插入图片描述

二、浮动实现导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0
        }
        ul,li{
            list-style: none
        }
        ul{
            width: 300px;
            height: 40px;
            background: pink
        }
        li{
            float: left;
            width: 60px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        li:hover{
            background-color: black;
            color: white
        }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>国内</li>
        <li>国际</li>
        <li>军事</li>
        <li>财经</li>
    </ul>
</body>
</html>

在这里插入图片描述