float浮动与清除浮动，解决父级边框塌陷的方法以及出现原因

最新推荐文章于 2024-08-11 11:01:02 发布
最新推荐文章于 2024-08-11 11:01:02 发布
阅读量762 收藏 1
点赞数
分类专栏： h5 css 文章标签： float clear overflow 父级边框塌陷 清除浮动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luckyGirlIT/article/details/95047051
版权
h5 同时被 2 个专栏收录
28 篇文章 0 订阅
订阅专栏
css
28 篇文章 0 订阅
订阅专栏

在这里插入图片描述
float浮动后父级边框塌陷的原因
父极边框塌陷：float元素大于父级大小，超出部分 自动下移，如果父级边框高度不够，则出现父级边框塌陷

在这里插入图片描述
如何清除浮动？
1.直接在style里面添加clear:
在这里插入图片描述
2.解决父级边框塌的方式1
在这里插入图片描述
简便方法：

在这里插入图片描述
3.解决父级边框塌的方式2
设置父元素的高度：
在这里插入图片描述
4.解决父级边框塌的方式3（overflow 溢出处理）在这里插入图片描述
在这里插入图片描述
5.解决父级边框塌的方式4 after伪类
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

luckyGirlIT
关注
专栏目录
CSS清除浮动-给父级添加overflow属性
m0_46744635的博客
08-17 484
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS清除浮动-给父级添加overflow属性</title> <style> .box{ .
CSS样式--浮动造成父级高度塌陷的原因及解决方法
小乔与你同在
08-26 2608
浮动很好用，但是用浮动后，当浮动元素的父级元素没有高度时，就会造成高度塌陷，从而影响布局。 一、浮动造成父级高度塌陷的原因 子级使用浮动后，会脱离文档流。父级占据原来的位置，此时父级也没有设置高度，没有内容撑开父级高度。 html部分： <div id="box"> <div class="btn1"></div> <div class="bt...
【css】浮动 解决父级边框塌陷问题的四种方法 display float overflow
最新发布
m0_66584716的博客
08-11 1002
指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。父级添加overflow属性（简单，但是下拉列表框的场景不能用）内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。设置父元素的高度（简单，但是固定高度会降低扩展性）inline-block和float的区别。/*在clear类后面添加内容为空*//*把添加的内容转化为块元素*//*清除这个元素两边的浮动*/（简单，但是会造成代码冗余）内联元素（inline）（复杂，但是没有副作用）
解决边框塌陷的四种方法
x1785551的博客
12-10 1689
当父级里面的子元素全部使用浮动后，所有子元素脱离了标准文档流，使得父级内部没有其内容，会造成边框塌陷现象。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浮动</title> <link href="css/float.css" rel="stylesheet" type="text/css"/> <...
CSS——display和浮动以及解决浮动中父级边框塌陷的问题
万里顾一程的博客
11-28 464
CSS——display和浮动 文章目录CSS——display和浮动display浮动（float）解决浮动中父级边框塌陷的问题方法一：增加父级边框的高度**方法二：增加一个空的div标签，清除浮动**方法三：在父级元素中使用overflow-hidden（简单）**方法四：父类添加一个伪类：after(推荐使用)**display和float的对比 display display 属性规定元素应该生成的框的类型。 display可能的值 none 此元素不会被显示。 block 此元素
四种解决父级边框塌陷方法
weixin_45672377的博客
12-16 2478
问题引入 当我们使用浮动时，可能出现元素超出父级元素的情况 如图 可以看到父级边框出现了塌陷情况 解决方案一：在父级属性设置高度（不推荐） .father{ border: 1px solid black; height: 10000px; } 解决方案二：添加一个空div块 <div class="clear"></div> .clear{ clear: both; margin: 0; padding: 0; } 解决方案三：父级
CSS清除浮动使父级元素展开的三个方法
09-25
由于浮动，这两个子元素不再占用父级元素的高度，导致`.content`的红色边框没有完全包裹住它们，出现了父级塌陷的现象。 为了解决这个问题，我们可以采取以下三种方法： 1. **设置父级元素的高度**： 这是最直接...
详解关于浮动元素float使其父元素高度塌陷的原因及解决方法
11-21
通过理解浮动元素的特性，以及掌握上述的解决方法，开发者可以有效地处理这个问题，创建出稳定且符合预期的网页布局。在现代前端开发中，虽然有Flexbox和Grid等更先进的布局模式，但在处理某些特定的旧版浏览器兼容...
css display 浮动 overflow 父级边框塌陷问题
JL542180727的博客
03-21 140
块级元素：独占一行 1 h1~h6 p div 列表... 行内元素： 不独占一行 img span a strong ... 行业元素 可以被包含在块级元素中，反之 ，则不可以 display <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- block 块儿.
详解css清除浮动float的七种常用方法总结和兼容性处理
11-21
在CSS布局中，浮动（float）是一个至关重要的概念，它允许元素脱离其正常的文档流，向指定方向移动，直到碰到父元素的边框或其他浮动元素。然而，这种浮动特性会导致一个名为“高度塌陷”的问题，即当父元素的子元素...
CSS--解决float浮动引起父级边框塌陷的四种方式
weixin_45406850的博客
02-13 1027
解决float引起的父级边框塌陷
CSS中清除外边框塌陷的4种方式
怕什么真理无穷，进一寸有一寸的欢喜。即使开了一辆老掉牙的破车，只要在前行就好，偶尔吹点小风，这就是幸
01-12 949
1：直接在外边框中把height属性值调大 2：在外边框的尾部加一个div标签，style设置成clear：both； 3：在外边框中加一个属性overflow：hidden。 4：使用结构伪类选择器：外边框：after，然后设置content："", display:block; clear:both; 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
什么是浮动,以及解决父级边框塌陷的四种方法
m0_68505386的博客
04-06 747
float 浮动,浮动样式主要用于对块元素的布局,元素一旦浮动起来就会脱离标准文档流,这样就可以让块元素一行多个显示, float浮动属性值包括:left,right,none(默认值),分别就是向左浮动,向右浮动和不浮动. clear清除浮动元素产生的空间,属性值包括left,right,both,分别是清除左浮动,清除右浮动和清除左右浮动. 清除左浮动或者清除右浮动可能会让元素重叠. 解决父级边框塌陷 清除浮动，防止父级边框塌陷的四种方法 1、浮动元素...
html父子级下拉框,CSS-浮动与父级边框塌陷问题
weixin_30558777的博客
06-03 251
【摘要】CSS-浮动与父级边框塌陷问题考必过小编为大家整理了关于CSS-浮动与父级边框塌陷问题的信息，希望可以帮助到大家！CSS-浮动与父级边框塌陷问题标签：order边框html使用解决方案设置问题固定p浮动块级元素：独占一行h1~h6 p p 列表...行内元素：不独占一行span a img strong...行内元素可以被包含中块级元素中。父级边框塌陷问题解决方案：1.增加父级元素的...
float浮动时，解决父级边框塌陷的4种方法
woyou98k的博客
12-17 8764
父级边框塌陷的原因： 我们在进行网页布局时，会用到float浮动属性，只要父级元素下的子元素浮动了，肯定会影响父级元素的边框。假设父级元素下有十个子元素，我们无论是全部浮动还是只浮动了一个元素，都要对父级元素采取措施防止边框塌陷。为什么这样说，我们可以试验一下，如果你只浮动了一个子元素，咱们让这个浮动的子元素高度在它同级里时最高的，运行一下，你会发现父级边框塌陷了。 解决方法： 1、给父级元
CSS（八）——浮动，父级边框塌陷的问题
weixin_52725999的博客
03-15 167
CSS 浮动 标准文档流 块级元素：独占一行 h1~h6 p div 列表... 行内元素：不独占一行 span a img strong... 行内元素可以包含在块级元素中，但是块级元素不能包含在行内元素中 display 是实现行内元素排列的方式，但是我们很多情况下使用的是float <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
清除浮动 不然ul 没有边框
weixin_44723840的博客
08-31 134
*{ margin:0; padding:0; } ul{ width:200px; border:1px solid black; } li{ list-style:none; width:30px; height:30px; border:1px solid black; float:left; } ul:after{ content:''; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值