CSS 浮动的灵活应用

最新推荐文章于 2024-07-09 09:39:15 发布

simon5169

最新推荐文章于 2024-07-09 09:39:15 发布

阅读量301

点赞数

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

本文链接：https://blog.csdn.net/blances/article/details/97617934

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS 浮动的灵活应用

一、什么是浮动
二、应用方法
- 1、传统方法
- 2、灵活方法

一、什么是浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

二、应用方法

1、传统方法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [class^="item"]{
            background-color:#f5f5f5;
            display:block;
            border: solid 1px black;
        }
        .left{
            float: left;
        }
        .container{
            background-color:#ff000052;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1 left">1</div>
        <div class="item2 left">2</div>
        <div class="item3 left">3</div>
        <div class="item4 left">4</div>
        <div class="item5 left">5</div>
        <div class="item6 left">6</div>
        <div style="clear:both"></div>
    </div>
    <div>7<div>
</body>

传统方法在每一个浮动的标签块沉底的时候增加一个div属性赋予clear:both，虽然可以实现，但是每一次都需要去写这个div。

结果：
传统结果

2、灵活方法

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [class^="item"]{
            background-color:#f5f5f5;
            display:block;
            border: solid 1px black;
        }
        .left{
            float: left;
        }
        .container{
            background-color:#ff000052;
        }
        .clearfix:after{
            content:'.';
            display:block;
            clear:both;
            visibility:hidden;
            height:0;
        }
    </style>

</head>
<body>
    <div class="container clearfix">
        <div class="item1 left">1</div>
        <div class="item2 left">2</div>
        <div class="item3 left">3</div>
        <div class="item4 left">4</div>
        <div class="item5 left">5</div>
        <div class="item6 left">6</div>
    </div>
    <div>7<div>
</body>

在这里插入图片描述

simon5169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 浮动的灵活应用

CSS 浮动的灵活应用一、什么是浮动二、应用方法1、传统方法2、灵活方法一、什么是浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。二、应用方法1、传统方法<head> <meta charset="UTF-8"> <tit...
复制链接

扫一扫

专栏目录