前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS浮动

CSS浮动

作者头像
羊羽shine
发布2019-06-17 14:39:02
3K0
发布2019-06-17 14:39:02
举报
文章被收录于专栏:Golang开发
浮动

布局的三种基本方式: 标准流 按照标签默认的特性摆放盒子即为标准流 浮动流 利用浮动摆放盒子即为浮动流 定位流 利用定位摆放盒子即为定位流 浮动最开始是做图文绕排的。

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .box{
            width: 300px;
            border: 1px solid #000;
           font-size: 12px;
        }
       img{
           width: 100px;
           height: 80px;
           float: left;
       }
    </style>
</head>
<body>
<div class="box">
    <img src="xuxin.png">2019年乒乓球日本公开赛16日全部结束,
    中国乒乓球队再一次展现王者风范,包揽了全部五项冠军!
    男单冠军:许昕;女单冠军:孙颖莎;女双冠军:刘诗雯/陈梦;男双冠军:樊振东/许昕;混双冠军:许昕/朱雨玲!再次祝贺中国乒乓球队!
</div>
</body>
</html>

image.png

利用浮动实现布局,一个靠左一个靠右

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            font-size: 12px;
        }
        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;

        }
        .right {
            width: 100px;
            height: 100px;
            float: right;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box">
   <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

image.png

让元素直接排成一排

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            font-size: 12px;
        }
        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
<div class="box">
   <div class="left">1</div>
    <div class="left">2</div>
    <div class="left">3</div>
</div>
</body>
</html>

image.png

脱标

浮动的元素会“脱标”,不在占有标准流的位置 脱标的元素拥有行内块的表现 脱标表示脱离了标准流 标准流:块元素单独占一行,行内元素可以排一排的这种默认的盒子排列方式就是标准流 (按照默认的规则排列的)

  1. 脱标的元素不占标准流的位置 浮动因为脱标的特性(脱离标准流了,不占位置,会盖住其他的标准流的盒子), 所以,在使用上有一个口诀:要浮全浮(要浮动的话兄弟元素都浮动)
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #0094ff;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2 {
            width: 110px;
            height: 110px;
            background-color: green;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
</div>
</body>
</html>

image.png

不会继承父级块级的的宽度,内容有多个就撑多大 。

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #0094ff;
        }
        .box1 {
            height: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">浮动块</div>
</div>
</body>
</html>

image.png

  1. 不论前身块级还是行内,可以直接写宽高
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #0094ff;
        }
        .box1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>
<div class="box">
    <span class="box1">span浮动</span>
</div>
</body>
</html>

image.png

  1. margin:auto 对于脱标元素不起作用 无法居中
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #0094ff;
        }
        .box1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="box">
    <span class="box1">span浮动</span>
</div>
</body>
</html>
  1. 浮动是在盒子内容区域浮动,不会超出padding区域(水平方向)
  2. 浮动的盒子一排装不下的时候会掉下来(掉下来的位置会根据上一个浮动盒子的高度决定)
  3. 右浮动会颠倒盒子顺序
  4. 浮动的盒子压不住文字和图片
  5. 尽量在标准流的盒子里面浮动
闭合浮动

浮动带来的问题:浮动元素撑不开父级容器 解决办法(闭合浮动):

  1. 强行给父盒子添加高度 (不推荐,不利于后期维护)
  2. 创建一个新的块级盒子放在浮动元素的最后面,给这个盒子添加一个css属性:clear:both;(不推荐,会产生一个多余的盒子)
  3. 用伪元素闭合浮动 (推荐,书写一个公共类就可以使用)
  4. 给父元素添加overflow:hidden; (在某些特定场景下使用不了)
伪元素

就是在当前元素内容的前面或者后面追加一个盒子 这个盒子由css渲染 伪元素特性:

1、伪元素由css渲染 所以不会增加你的DOM(html结构)开销 2、伪元素默认是行内元素 可以进行转块等处理 3、伪元素不管有没有内容 content这个值一定不能少 即使没有 也要写个空 4、伪元素 官方推荐写:: 但是为了兼容考虑 写成单冒号 5、因为伪元素是css渲染 所以JS获取不到 伪元素清除浮动完整代码:

代码语言:javascript
复制
.clearfix::after {
    content:'';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}
.clearfix {
    *zoom:1;
}
或者
.clearfix:before,
.clearfix:after { 
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
/* 为了兼容IE6,7 */
.clearfix {
    *zoom:1;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.06.17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 浮动
  • 脱标
  • 闭合浮动
  • 伪元素
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档