浮动·消除浮动

已于 2022-01-21 19:43:45 修改
阅读量148 收藏
点赞数
分类专栏： css 文章标签： css css3 html
于 2021-12-29 09:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51610980/article/details/122201460
版权

浮动

什么是浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。它可以让任何盒子可以在一行排列，用浮动来布局。
在这里插入图片描述

浮动元素

对于浮动元素有几点要记住。首先，会以某种方式将浮动元素从文档的正常流中删除，不过还是会影响布局。采用css的特有方式，浮动元素几乎“自成一派”，不过它们还是对文档的其余部分有影响。这种影响源自于一个事实一个元素浮动时，其它内容那个会“环绕”该元素。
简记：脱离正常的文档流，不保存物理空间

元素浮动的影响

1、对其父元素的影响

对于其父元素来说，元素浮动之后，它脱离文档流，无法撑开其父元素，造成父元素的塌陷(高度为0)
例子：

<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>

效果展示
在这里插入图片描述

当将其中子div向左移动时

<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: left;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>

效果展示
在这里插入图片描述

2、对非浮动兄弟元素的影响

如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层。如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
例子：

<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
    }
    #div3{
        width: 100px;
       height: 100px;
        background-color: rgb(181, 245, 32);
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
        <div id="div3">

        </div>
    </div>

</body>
</html>

效果展示
在这里插入图片描述
当其中一个浮动时

<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: left;
    }
    #div3{
        width: 100px;
       height: 100px;
        background-color: rgb(181, 245, 32);
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
        <div id="div3">

        </div>
    </div>

</body>
</html>

在这里插入图片描述

3.浮动兄弟元素的影响

  • 同一个方向浮动：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
  • 反方向浮动：互不影响，位于同一条水平线上，一行不够时，后面的元素会排在下一行
    例子：
<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: rgb(181, 245, 32);
    }
    #div4{
        width: 100px;
         height: 100px;
        background-color: rgb(240, 12, 69);
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>

        <div id="div3">
    
        </div>
        <div id="div4">
    
        </div>
    </div>

</body>
</html>

效果展示
在这里插入图片描述
加上浮动

<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: left;
    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: rgb(181, 245, 32);
        float: left;
    }
    #div4{
        width: 100px;
         height: 100px;
        background-color: rgb(240, 12, 69);
        float: right;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>

        <div id="div3">
    
        </div>
        <div id="div4">
    
        </div>
    </div>

</body>
</html>

效果展示
在这里插入图片描述

4、对子元素的影响

当一个元素浮动时，它的高度和宽度由子元素撑开。
例子：

<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;

    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: rgb(181, 245, 32);
    }
    #div4{
        width: 100px;
         height: 100px;
        background-color: rgb(240, 12, 69);
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>

        <div id="div3">
    
        </div>
        <div id="div4">
    
        </div>
    </div>

</body>
</html>

效果展示
在这里插入图片描述
加上浮动

<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
       float: left; 
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;

    }
    #div3{
        width: 100px;
        height: 100px;
        background-color: rgb(181, 245, 32);
    }
    #div4{
        width: 100px;
         height: 100px;
        background-color: rgb(240, 12, 69);
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>

        <div id="div3">
    
        </div>
        <div id="div4">
    
        </div>
    </div>

</body>
</html>

效果展示

在这里插入图片描述

消除浮动

利用clear清除

clear描述
left清除左侧浮动的影响
right清除右侧浮动的影响
both同时清除左右两侧浮动的影响

添加clear的两种形式

  • 添加div（如果需要清楚地浮动比较多，会比较繁杂）
  • after伪元素
    例子：
<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: right;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>

效果展示：
在这里插入图片描述
进行添加div消除浮动

<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: right;
    }
    #div3{
        clear: right;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
        <div id="div3">
            
        </div>
    </div>

</body>
</html>

效果展示
在这里插入图片描述
利用伪元素进行消除浮动

<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: right;
    }
    div::after{
        content: '';
        display: block;
        clear: both;
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>

效果展示
在这里插入图片描述

建立BFC环境

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
**加粗样式**
例子：

<!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>Document</title>
</head>
<style>
    #div1{
       border: 5px black solid;
       overflow: hidden;
    }
    #div2{
       width: 100px;
       height: 100px;
        background-color: blue;
        float: right;    
    }
</style>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>

在这里插入图片描述

结束结束，又是做码农的一天
在这里插入图片描述

醉挽清欢
关注
专栏目录
浮动、消除浮动塌陷、overflow小拓展
m0_64460142的博客
04-06 460
1.什么样叫浮动，浮动使用float 什么样叫浮动？ 举例子：有这样的代码 <style> .div1{ padding:20px; border:1px dashed red; } 加入浮动 .div1 img{ float:left;/*浮动在左侧*/ } </style> <div class="div1"> ...
什么是浮动？有哪些消除浮动的方法？
IT修真院：初学者转行到互联网的聚集地
06-03 957
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【什么是浮动？有哪些消除浮动的方法？ 】 大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。 1.背景介绍 浮动是怎么诞生的？浮动最初设计的目的并没那么多事儿，就只...
flex弹性盒子布局实例
11-08
flex弹性盒子布局实例，本次博客实例需要的一些资源，源代码，可自行下载研究，一起进步，共勉，一起加油
[css] 剩余宽度自适应
qq_14993591的博客
08-09 623
calc(100% - 200px); 注意有空格才能生效 <!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-scal
弹性盒布局实例
weixin_30677617的博客
09-28 492
　　今天给大家搞一个弹性盒布局的实例，最近一直在复习一些基础的东西，所以一直会跟大家分享一些基础的东西 　　说实话，最近感觉被掏空了，别问我为什么，谁去保健谁知道，哈哈，注意安全，好了步入正题，今天用弹性盒写了一个小例子， 　　关于弹性盒的一些基础我就不列举了，大家有需要可以去 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html...
弹性盒子布局
weixin_34008784的博客
11-21 246
最近在开发公司的平台系统，因为该项目主要是运行在移动端，所以采用了flex弹性布局。flex布局用起来很灵话，提高了开发效率。而且性能貌似比传统的浮动布局好。 1. 首先声明父元素布局方式为弹性布局 　　display: -webkit-flex; /* Safari */　　display:flex; 2.然后设置横向主轴子元素排列方式 justify-content...
弹性盒子布局实例
橘猫吃不胖的博客
10-28 1486
弹性盒子布局实例1.1 基本网络布局1.2 圣杯布局 1.1 基本网络布局 1.2 圣杯布局
用clearfix:after消除css浮动解决外部div不能撑开问题
09-25
在本例中，我们将探讨如何使用`clearfix:after`来消除浮动并确保外部`div`能根据内部浮动元素自动调整高度。 浮动元素的特性是它们会脱离常规文档流，只在其内容区域内占用空间，而不影响其他非浮动元素的布局。当...
Bootstrap3.0学习笔记之特殊的效果（显示隐藏、消除浮动、关闭按钮等）
09-22
本文介绍了8款bootstrap3.0中特殊的效果，包括1....快速设置浮动 4.内容区域居中 5.清除浮动 6.显示或隐藏内容 7.针对屏幕阅读器的内容 8.图片替换，非常的实用，是篇非常不错的文章，推荐给大家。
消除浮动
06-01
为了消除浮动带来的影响，有以下几种方法： 1. 清除浮动：在浮动元素的容器中添加一个空的 div 元素，并设置 clear 属性，例如： ``` ;"> ``` 这样可以清除浮动带来的影响，但会增加无用的代码。 2. 使用 ...
Jquery.js文件
10-15
jquery-1.7.2.js 和jquery-1.8.2.js 测试过 ，可用 分享给大家
弹性盒布局案例
lizhipeng110的博客
03-22 1235
1-6筛子布局 div{ width: 100px; height: 100px; background: #ccc; margin: 100px; border-radius:10px; box-shadow:1px 1px 3px 1px #000; } p{ /background: yellow;/ } span{ width: 20px; height: 20px; backgroun...
弹性盒布局方法示例
Mr_qinyivue的博客
09-20 334
弹性盒多布局方法 1.flex-direction：row; 默认x主轴 column 为y轴 ，row-reverse x轴为主轴，并反向排列 ，column-reverse Y轴为主轴并反向排列。 2.主轴对齐方式 justify-content: center 居中 space-between 两端对齐 space-around 自动间距对齐，flex-start开始位置 flex-end 结束位置 3.侧轴对齐方式 align-items 属性值常用center 居中 ，fl
弹性盒子布局实例详解：从水平布局到垂直布局
最新发布
weixin_43578304的博客
02-27 1708
在CSS中，弹性盒子布局（Flexbox）提供了一种在容器内高效、灵活地对齐和分布空间的方式。无论是水平布局还是垂直布局，Flexbox都能轻松应对。下面我们将通过几个实例来详细讲解如何在水平和垂直方向上应用Flexbox布局。
【学习笔记】jQuery.js
weixin_45305844的博客
07-31 7941
文章目录什么是javascript库？jQuery的概念jQuery的优点jQuery的入口函数jQuery的顶级对象$DOM对象和jQuery对象DOM对象和jQuery对象的相互转换jQuery基础选择器jQuery层级选择器jQuery设置css样式隐式迭代jQuery筛选选择器jQuery筛选方法jQuery链式编程jQuery操作css方法jQuery类名操作jQuery动画效果自定义动画：鼠标事件复合写法动画队列及其停止排队方法设置或获取元素固有属性值设置或获取元素自定义属性值数据缓存jQuer
html弹性盒子布局,实例讲解CSS3中的box-flex弹性盒属性布局
weixin_36048031的博客
06-30 749
box-flex是css3新添加的盒子模型属性，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分。但是它有一定的局限性，在firefox、chrome这浏览器下需要使用它们的私有属性来定义：firefox(-moz)、chrome(-webkit)。一、box-flex属性box-flex主要让子容器针对父容器的宽度按一定规则进行划分。CSS Code复制内容到剪贴板111...
.NET进度条用例
晖轩大师
03-02 469
default.aspx文件 #filter{ display:none; position:absolute;bottom:0px;right:0px; left:0px; top:0px; z-index:1000;background: #000000;filter:Alpha(opacity=30);opacity:0.3}  #promptbox{display:none; le
弹性盒模型和案例布局
牛先森家的博客
06-06 668
弹性盒模型 怪异盒模型： box-sizing： 属性值： content-box；（标准盒模型） border-box；（怪异盒模型） 怪异盒模型特点： padding和border不会对盒子大小产生影响 所添加padding和border在宽高内部。 弹性盒：布局方法； 作用：弹性盒控制子元素(不包括孙子辈元素)的布局方法。 特点： a: 弹性盒默认情况下，子元素沿着“主轴”排列，默认情况下X轴为主轴 b: 弹性盒的子元素称作“灵活元素”，所有的子元素都能设置宽高 c: 如果一个子元素在弹性盒
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值