CSS 浮动（float）_cs浮动-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45867247/article/details/128049293

文章目录

什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

属性

属性	描述
none	默认不浮动在默认文档流显示元素类型
left	向左浮动
right	向右浮动

特点

不独占一行的元素，浮动之后可以直接设置宽高

浮动的规则

浮动的元素会半脱离文档流，不占据页面空间，不会遮挡下面的文字
浮动的元素会在父元素的限制范围内浮动
浮动元素会在当前行框内进行浮动

浮动的问题

浮动的问题—高度塌陷

当父元素的高度靠子元素撑开的时候，子元素全部浮动，导致父元素没有高度，此刻父元素的高度塌陷，后果是浮动布局失败。

解决—清除浮动

给父元素设置高度----不推荐
给父元素设置overflow: hidden;

触发了BFC，计算BFC区域的高度，浮动元素参与计算

案例—导航练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            li {
                /* 1.重置样式 */
                list-style: none;
                /* 2.li的宽高 */
                width: 150px;
                height: 52px;
                /* 3.水平垂直居中 */
                text-align: center;
                line-height: 52px;
                /* 4.文本颜色 */
                color: #fff;
                /* 5.背景色 */
                background-color: #000;
                /* 6.一行显示 */
                float: left;
            }
            /* 7.hover */
            li:hover {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <!-- ul>li*8{折叠麻将机} -->
        <ul>
            <li>折叠麻将机</li>
            <li>折叠麻将机</li>
            <li>折叠麻将机</li>
            <li>折叠麻将机</li>
            <li>折叠麻将机</li>
            <li>折叠麻将机</li>
            <li>折叠麻将机</li>
            <li>折叠麻将机</li>
        </ul>
    </body>
</html>