浮动样式

最新推荐文章于 2023-10-18 21:02:51 发布

guokanglun

最新推荐文章于 2023-10-18 21:02:51 发布

阅读量407

点赞数

分类专栏： DIV + CSS

本文链接：https://blog.csdn.net/gklcsdn/article/details/103468038

版权

DIV + CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

1. 浮动

浮动就是让布局盒子从左往右（从右往左）展示

float: left 左浮动
float: right 右浮动

（1）浮动元素的盒子会脱离文档流，浮动元素位置空置，后面元素会正常占据浮动元素原来的位置
（2）浮动元素父级宽度不够会往下掉
（3）浮动元素宽度不够另起一行的时候会被其中比较高的元素卡住

（4）浮动元素的父级盒子高度塌陷，浮动元素不能撑开父级盒子高度

2. 清除浮动

使用浮动后需要清除浮动（浮动元素不能撑开父级盒子高度）

清除浮动方式：
（1）给父级盒子高度（不常用，因为一般情况定宽不定高）

（2）给浮动元素父级盒子添加 overflow：hidden

（3）clear: both 清除浮动样式，只能在浮动元素父级元素相邻第一个块级元素上

清除浮动最常用方式（伪元素）
.clearfix:after{
content: ‘’; 激活伪元素，激活内容，内容为空不占位置
display: block; 转换为块元素
clear: both；清除浮动样式
}

3. 伪元素

（1）伪元素是内联元素
（2）寄托在真元素上
:before
:after

4. 清除浮动例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        可作为初始样式使用，需要时给浮动元素父级盒子添加clearfix类名即可
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        
        ul {
            width: 1200px;
            margin: auto;
        }
        
        li {
            float: left;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul class='clearfix'>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <p>清除浮动</p>
</body>

</html>