CSS笔记浮动在一行中均匀放好几个盒子

最新推荐文章于 2023-04-10 15:06:46 发布

yogur_father

最新推荐文章于 2023-04-10 15:06:46 发布

阅读量2.1k

点赞数 2

分类专栏：入门学习文章标签： html css

本文链接：https://blog.csdn.net/yogur_father/article/details/109727673

版权

入门学习专栏收录该内容

156 篇文章 3 订阅

订阅专栏

一.浮动在一行中均匀放盒子

使用浮动，让子盒子在父盒子里面排布，然后使用左浮动使其排列
用外边距让他们之间出现空隙

* {
    padding: 0px;
    margin: 0px;
}

.father {
    width: 1226px;
    height: 285px;
    background-color: red;
    margin: 0 auto;
}

.father span {
    width: 296px;
    height: 285px;
    background-color: green;
    float: left;    // 浮动起来
    margin-right: 14px;
}

.father .LastSpan {
    margin-right: 0px;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 人物表格 </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="father">
        <span></span>
        <span></span>
        <span></span>
        <span class="LastSpan"></span>
    </div>

</body>

</html>

在这里插入图片描述

二.清除浮动

有的时候我们不能设置父盒子的高度，因为不确定子盒子到底有多少
但是不设置父盒子的高度，那他的高度就是0，后面的标准流盒子会出现在子盒子的地下

所以我们可以使用以下方法清除浮动

给父盒子加一句 overflow: hidden;

这样不给父盒子设置高度，子盒子就能把父盒子撑开
注：缺点是会切掉显示不全的盒子
使用双伪元素，添加给父盒子这个类
2.1 添加一个类clearfix

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* 照顾低版本浏览器 */
.clearfix {
    *zoom: 1;
}

2.2 在父盒子中添加类clearfix

<div class="father clearfix">

yogur_father

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记浮动在一行中均匀放好几个盒子

一.浮动在一行中均匀放盒子使用浮动，让子盒子在父盒子里面排布，然后使用左浮动使其排列用外边距让他们之间出现空隙* { padding: 0px; margin: 0px;}.father { width: 1226px; height: 285px; background-color: red; margin: 0 auto;}.father span { width: 296px; height: 285px; b
复制链接

扫一扫