[华为云在线课程][大话CSS][学习笔记][第5章][CSS浮动]

举报
John2021 发表于 2022/01/28 15:41:24 2022/01/28
【摘要】 5.1,浮动 什么叫浮动浮动是指将元素脱离文档流向左或者向右布局使用float属性来设置元素的浮动默认值为none,也就是不浮动还可以设置为left,表示向左浮动;或设置为right,表示向右浮动 浮动的特点一旦对元素设置浮动后,无论之前元素是内联元素还是块级元素,都会被当作块级元素处理一旦对元素设置浮动之后,该元素便会脱离标准流,会造成其父元素的内容塌陷 例如.box{ float...

5.1,浮动

什么叫浮动

  • 浮动是指将元素脱离文档流向左或者向右布局
  • 使用float属性来设置元素的浮动
  • 默认值为none,也就是不浮动
  • 还可以设置为left,表示向左浮动;或设置为right,表示向右浮动

浮动的特点

  • 一旦对元素设置浮动后,无论之前元素是内联元素还是块级元素,都会被当作块级元素处理
  • 一旦对元素设置浮动之后,该元素便会脱离标准流,会造成其父元素的内容塌陷

例如

.box
{
    float: left;
}

.box1
{
    float: right;
}

.box2
{
    float: none;
}

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .box
        {
            border: 1px solid black;
        }

        .swim
        {
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
<div class="box">一天到晚游泳的鱼
    <div class="swim">我就是我</div>
</div>
</body>
</html>

5.2,清除浮动

为什么要清除浮动

  • 元素设置为浮动时引起的父元素内容塌陷,影响布局效果

clear属性

  • clear属性用于设置元素哪一侧不允许浮动
  • 默认值为none,表示不进行控制
  • 当设置为left时,表示左侧不允许浮动
  • 当设置为right时,表示右侧不允许浮动
  • 当设置为both时,表示两侧都不允许浮动

overflow属性

  • overflow属性用于设置元素不够容纳内容时的显示方式
  • 默认值为visible
  • 当值为auto时,自动添加滚动条
  • 当值为hidden时,会用匿藏掉超出的内容
  • 当值为scroll时,会一直显示滚动条

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .box
        {
            border: 1px solid black;
            width: 500px;
            /* height: 50px;*/
            overflow: auto;
        }

        .left
        {
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }

        .right
        {
            width: 200px;
            height: 200px;
            background-color: green;
            float: right;
        }

        .clear
        {
            clear: both;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left">我是正在游泳的left</div>
    <div class="right">我是正在游泳的right</div>
    <!-- <div class="clear"></div> -->
</div>
<!-- <div class="box">
    华为技术有限公司,成立于1987年,总部位于广东省深圳市龙岗区。 [1]  华为是全球领先的信息与通信技术(ICT)解决方案供应商,专注于ICT领域,坚持稳健经营、持续创新、开放合作,在电信运营商、企业、终端和云计算等领域构筑了端到端的解决方案优势,为运营商客户、企业客户和消费者提供有竞争力的ICT解决方案、产品和服务,并致力于实现未来信息社会、构建更美好的全联接世界。2013年,华为首超全球第一大电信设备商爱立信,排名《财富》世界500强第315位。华为的产品和解决方案已经应用于全球170多个国家,服务全球运营商50强中的45家及全球1/3的人口。
</div> -->
</body>
</html>

5.3,常用技巧

企业级应用中清除浮动的最佳方法

  • clearfix方案
  • 使用伪元素after在父元素尾部添加一个元素
  • 对这个添加的伪元素应用清除浮动的样式
  • 必备三大样式:content、clear、display
  • 可选三大样式:height、font-size、visibility
  • 例如
.clearfix:after
{
    content: "";
    clear: both;
    display: block;
}

.clearfix:after
{
    content: "";
    clear: both;
    display: block;
    height: 0px;
    font-size: 0px;
    visibility: hidden;
}

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>去除浮动</title>
    <style>
        .box
        {
            border: 1px solid black;

        }

        .left
        {
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }

        .right
        {
            width: 200px;
            height: 200px;
            background-color: green;
            float: right;
        }

        .clearfix:after
        {
            content: "";
            clear: both;
            display: block;

            height: 0px;
            font-size: 0px;
            visibility: hidden;
        }

        .clear
        {
            clear: both;
        }
    </style>
</head>
<body>
<div class="box clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

5.4,实战案例

如何实现一个三列布局

  • 实现一个左中右布局
  • 左右两侧宽度固定
  • 中间内容区宽度能够自适应

双飞翼布局

  • 第一步:使用float属性让左中右三列浮动
  • 第二步:使用负margin属性让左右两列与中间列处于同一水平线上
  • 第三步:在中间列中增加一个div内容元素,设置margin值为左右两列的宽度
  • 最后,别忘了清除浮动,让父元素高度正常显示

优点

  • 中间内容列宽度自适应
  • 中间内容区域先加载
  • 使用浮动布局
  • 巧妙使用负margin属性保持三列水平
  • 方法简单直接
  • 浏览器兼容性好

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局</title>
    <style>
        .container
        {
            border: 1px solid red;
            width: 800px;
            margin: 0px auto;
            overflow: hidden;
        }
        .center
        {
            float: left;
            background: yellow;
            width: 100%;
        }
        .left
        {
            float: left;
            background: green;
            width: 200px;
            margin-left: -100%;
        }
        .right
        {
            float: left;
            background:pink;
            width: 200px;
            margin-left: -200px;
        }
        .content
        {
            margin: 0% 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">
            <div class="content">华为云</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。