浮动和清楚浮动的使用

最新推荐文章于 2022-12-06 09:59:20 发布
最新推荐文章于 2022-12-06 09:59:20 发布
阅读量241 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44538411/article/details/86739597
版权 
开发工具与关键技术：DW 2017 
作者：陈隆
撰写时间：2019年01月27日

首先我来创建一个HTML文件把测试要用到的内容写到HTML页面上，写一个大的div盒子装着三个小的盒子里面再放个数字来分清楚这几个盒子的位置，然后测试这个浮动的功能到底是怎么样的，（HTML代码具体看下图）
在这里插入图片描述
写好HTML部分后再来创建一个CSS写一些样式，先把创建好的CSS文件引入到HTML页面中，引用代码写在head中就可以了，引用代码<link rel="stylesheet" href="css/com.css">，
然后再把需要的样式写好就行了，用三个盒子来测试浮动的使用（样式的具体代码看下图）
在这里插入图片描述
下图是没使用浮动的情况
在这里插入图片描述
这时就是需要用float: left;左浮动来把这几个盒子浮动到一行去（效果看下图）
在这里插入图片描述
清楚浮动就是当在子元素使用浮动后父元素就不会被撑大，这样父元素就需要用到清楚浮动。

ZX-10R
关注
html div元素浮动,CSS实现元素浮动和清除浮动的方法
weixin_33417371的博客
06-10 1113
浮动基本介绍在标准文档流中元素分为2种，块级元素和行内元素，如果想让一些元素既要有块级元素的特点也同时保留行内元素特点，只能让这些元素脱离标准文档流即可。浮动可以让元素脱离标准文档流，可以实现让多个元素排在同一行，并且可以设置宽高度。其实浮动是通过float属性来实现的。float属性值说明表：属性值描述left设置元素向左浮动。right设置元素向右浮动。右浮动实践让我们进入右浮动的实践，实践内...
Dreamweaver怎么使用clear清除浮动?
09-24
Dreamweaver怎么使用clear清除浮动？Dreamweaver中想要清除清除浮动命令，该怎么使用呢？下面我们就来详细介绍clear清除浮动的使用方法，需要的朋友可以参考下
清楚浮动
lcxmjk的专栏
03-11 244
&lt;div style="clear:both;"&gt;&lt;/div&gt;  如果在IE和FF下显示不一样时，把上面代码替换成下面代码： &lt;div style="clear:both; overflow:hidden;"&gt;&lt;/div&gt;
css清楚浮动的方法 -常用的3种
a221936500的专栏
09-25 677
常用的清除浮动的方法有以下三种: 此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。 复制代码 *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;heig
清楚浮动的方法
zhujiecan的博客
05-29 371
为什么要清楚浮动 因为浮动存在浮动父级高度塌陷的缺陷，所以要清楚浮动 父级高度塌陷是因为浮动的元素脱离了普通文档流，也就是浮起来了，没有可以撑起父元素高度的了高度就变成0了 清楚浮动的方法 浮动在布局中常用，所以面试时也是经常提问的问题 下面几种常用的清楚浮动的方法 下面为所有方法的前提布局 清除浮动原理：就是让其重新审查自己内部的元素，使其包裹住所有元素，从而达到清楚浮动的效(即BFC) BFC...
css 浮动及清除浮动 详细讲解
diaofugeng2712的博客
05-15 145
浮动（重点） 用法： float: left | right 特点：1. 设置了浮动，该元素脱标。元素不占位置2. 设置了浮动的元素可以在一行上显示3. 浮动可以进行模式转换（行内块元素） 作用： 1. 制作网页导航【让块级元素在一行上显示就使用浮动】 2. 实现图片和文字环绕效果 3. 实现网页布局 什么情况下需要清除浮动 ☞...
一文搞懂浮动原理和浮动清除
weixin_44002432的博客
11-28 498
前言 CSS中正常的流内容或者流布局虽然也足够强大，但是有时候我们希望有一些特殊的布局表现，例如，文字环绕效果，或者元素固定在某个位置，要实现这样的效果，正常的流就有些捉襟见肘。因此，CSS中有float属性，专门通过破坏正常的“流”来实现一些特殊的样式表现。当然，既然有破坏，就有保护其他元素不被破坏的clear属性，本章就来介绍 CSS的float和clear属性。 浮动是什么？ W3schoo...
标准流和浮动流相关的理解
11-10
谈谈对标准流和文档流的理解，标准流有叫做普通流和文档流， 浮动流的理解，标准流就是从左到右，从上到下的布局
CSS3 清除浮动的方法示例
09-24
【清除浮动的原理和方法】 在CSS布局中，浮动元素（通常使用`float: left`或`float: right`）可以使得元素脱离正常文档流，从而实现如图文环绕的效果或者创建多列布局。然而，这种脱离正常文档流的行为可能会导致...
CSS中使用clearfix清除浮动的方法
01-19
首先在很多很多年以前我们常用的清除浮动是这样的。...但是我发现大型网站中 居然还在使用这种清楚浮动的方法。有兴趣的同学可以上他们首页搜索一下他们的.blank0这个样式名称。 　因此有很多大神就研究出了 clea
清除浮动
初阶农民工的博客
05-17 1644
浮动的目的：把多个盒子放在一行上清除浮动的目的：解决父盒子高度为0的问题清除浮动，也称闭合浮动注：本文不兼容IE6原代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;清除浮动&lt;/title&gt; &lt;style type=&am
清除浮动（详解）
wwwjjjjj666的博客
12-06 2722
清除浮动（详解）
清楚浮动四种常用方法
haruhyuhae的博客
08-31 264
清楚浮动是为了解决子元素浮动后父元素高度塌陷问题，清楚浮动后，父元素的高度就会恢复在页面原有的高度，而非0 空标签 在浮动元素的末尾加一个空的标签 .clear{ clear:both } overflow:hidden 给父标签加 overflow:hidden 属性 通过触发BFC方式，实现清除浮动 伪元素 使用after伪元素清除浮动 .clear:after{ clear:both; display:block } .clear{ zoom:1 /*ie6清除浮动的方式 *号只有
小记：去除浮动的方法
不咋爱学习の任大猫
06-21 616
1、给父级div添加高度 height原理：父级手动定义height，解决了父级元素无法获取高度的问题优点：简单、代码少、容易掌握 缺点：父级div高度固定，不灵活。如果高度设定与父元素高度设定不一致（高出设定高度）就会出现问题。（不建议使用该方法）2、overflow:hidden原理：先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,清除这个父元素中的子元素浮动...
h5-----------清除浮动
学习是我快乐， 吗
07-06 399
不设置浮动的效果图：box1设置了浮动后：clear: left之后可还原到 不设置浮动的效果图box1 box2都设置了浮动的效果图box3清除所有浮动：clear: both效果图&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
清除浮动的4种方式
热门推荐
田兴的博客
07-27 5万+
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 如下: 给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子。 当我给内部两个盒子加上float属性的时候 底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 清除浮动的方法（最常用的4种） 一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。 优点： 通俗易懂，书写方便。（
2020-10-23
cxxhhzsl的博客
10-23 340
胃小菜 来看一个实验：现在有两个div，div身上没有任何属性。每个div中都有li，这些li都是浮动的。 我们本以为这些li，会分为两排，但是，第二组中的第1个li，去贴靠第一组中的最后一个li了。 第二个div中的li，去贴第一个div中最后一个li的边了。 原因就是因为div没有高度，不能给自己浮动的孩子们，一个容器。 清除浮动方法1:给浮动的元素的祖先元素加上高度 如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮
jq清楚浮动
最新发布
05-30
清除浮动是为了解决浮动元素引起的高度坍塌问题。常见的清除浮动的方法有以下几种： 1. 父级元素设置 overflow: hidden; 或者 overflow: auto;，但是这种方法会影响到子元素溢出时的显示。 2. 在浮动元素末尾添加一个空的块元素，并设置 clear: both;。 3. 使用伪元素 ::after 或者 ::before，给浮动元素的父级元素添加一个空元素，并设置 clear: both;。 4. 使用 clearfix 清除浮动，即在样式表中定义： ``` .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; } ``` 其中，::before 和 ::after 伪元素用于在元素内部创建内容，可以通过 content 属性来设置内容，*zoom: 1; 是为了兼容 IE6/7。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值