精华内容
下载资源
问答
  • DIV+CSS 解决浮动塌陷

    2019-05-16 22:26:21
    方法一: overflow:hidden 方法二: 加一个DIV,样式为:clear:both; 方法三: 给DIV设置高度

    方法一:

    overflow:hidden

    方法二:

    加一个DIV,样式为:clear:both;

    方法三:

    给DIV设置高度

     

     

    展开全文
  • 浮动塌陷拿出来做文章是因为之前没深究过它的原理,导致在布局中常因为浮动塌陷撑不开div而苦恼;借此写个总结加深记忆,也顺便说说浮动和定位的那点事...何谓“浮动塌陷”先看一段代码#aa{margin: 100px 100px;...

    写于2017-07-16,但是发现简书比个人网站省力气得多,遂搬家至此;

    把浮动塌陷拿出来做文章是因为之前没深究过它的原理,导致在布局中常因为浮动塌陷撑不开div而苦恼;

    借此写个总结加深记忆,也顺便说说浮动和定位的那点事...

    何谓“浮动塌陷”

    先看一段代码

    #aa{

    margin: 100px 100px;

    width: 500px;

    height: auto;

    border: 2px solid blueviolet;

    }

    #ff{

    width: 50px;

    height: 100px;

    float: left;

    border: 2px solid red;

    }

    代码运行结果如图:紫色div本应被红div撑开;

    但由于红div浮动后脱离文档流导致紫div没有同一文档流的子元素,而heiight也没设定值,空的紫色div上下边就重合了。这就是浮动导致的浮动塌陷;

    8817a3335b9a

    浮动塌陷

    那么如何解决浮动塌陷??

    给父元素加overflow:hidden;

    这种方法可能会导致下拉框等内容不可见,慎用;

    给父元素加float:left/right;

    使用此方法 要注意浮动对布局是否有影响;

    给父元素加position:absolute;

    注意事项 同上;

    在浮动元素末尾添加一个空的标签例如

    有人说这种方式引入了不必要的冗余元素;

    父元素的after伪元素设置clear属性.clearfix:after{...};

    别人都说这个办法好;

    最直接:给父元素设固定 height;

    我个人最常用的是第四种和第五种,一个空div标签翻不了天,而且代码量少,对布局不会造成什么影响

    其实它和添加一个伪元素的性质是一样的,只不过一个看得见一个看不见;

    接下来再说说float 和position

    浮动是个神奇的东西。给行内元素加上浮动,就会具有块状元素的特性;

    浮动对position:absolute和display:flex的元素无效,也就是影响不了这两位;

    浮动会影响position:relative。不信你可以试试,我就不贴demo了;

    说到relative,很多同学初学时会很迷这块,现在一句话让你醍醐灌顶:“占着茅坑不拉屎!”有道理不;

    想到什么日后再补充,毕竟float是个神奇物种,一时间也概括不全;

    展开全文
  • <div class="box2"></div> </div> <div class="box3"></div> 第二种方式:通过clear属性来清除浮动 <!doctype html> <title></title> .box1{ border:1px solid red; } .box2{ ...

    第一种方式:开启BFC属性

    <!doctype html>
    <html>
    	<head>
    		<title></title>
    		<mata charset="utf-8"/>
    		<style type="text/css">
    		.box1{
    			border:10px red solid;
    			/*
    				根据W3C的标准,在页面中的一个隐含的属性叫做Block Formatting Context
    				简称BFC,该属性可以设置打开或者关闭,默认关闭的。
    				当开启元素的BFC以后,元素将会具有如下的特性:
    				1.父元素的垂直外边距不会和子元素重叠
    				2.开启BFC的元素不会被浮动元素所覆盖
    				3.开启BFC的元素可以包含浮动的子元素
    				
    			推荐开启方式:将overflow设置为hidden
    				可以保证父元素的宽度不丢失,同时不会导致下边的元素上移
    			*/
    			overflow:hidden;
    			/*兼容IE6及其以下版本*/
    			zoom:1;
    		}
    		.box2{
    			width:100px;
    			height:100px;
    			background-color:blue;
                            /*设置向左浮动*/
                             float:left;
    		}
    		.box3{
    			height:200px;
    			background-color:yellow
    		}
    		</style>
    	</head>
    	<body>
    		<div class="box1">
    			<div class="box2"></div>
    		</div>
    		<div class="box3"></div>
    	<body>
    </html>
    

    第二种方式:通过clear属性来清除浮动

    <!doctype html>
    <html>
    	<head>
    		<title></title>
    		<mata charset="utf-8"/>
    		<style type="text/css">
    		.box1{
    			border:1px solid red;
    		}
    		.box2{
    			width :100px;
    			height:100px;
    			background-color:blue;
    			float:left;
    		}
    		/*
    			通过after伪类,选中box1的后边
    			可以通过after伪类向元素的最后添加一个空白的块元素,
    			然后对其清除浮动
    		*/
    		.clearfix:after{
    			content:"";
    			display:block;
    			clear:both;
    		}
    		/*
    			兼容IE6(IE6不支持after伪类)
    		*/
    		.clearfix{
    			zoom:1;
    		}
    		</style>
    	</head>
    	<body>
    		<div class="box1 clearfix">
    			<div class="box2"></div>
    		</div>
    
    	<body>
    </html>


    展开全文
  • C作一新求抖直微圈SS浮动先看一个例子HTML2.div-outer {border: solid 2px #223344;}.div1 {width: 200px;height: 100px;border: solid 2px #667788;}.div2 {width: 200px;height: 100px;border: solid 2px #667788...

    一. C作一新求抖直微圈SS浮动

    先看一个例子

    HTML2

    .div-outer {

    border: solid 2px #223344;

    }

    .div1 {

    width: 200px;

    height: 100px;

    border: solid 2px #667788;

    }

    .div2 {

    width: 200px;

    height: 100px;

    border: solid 2px #667788;

    }

    .div3 {

    width: 200px;

    height: 100px;

    border: solid 2px #667788;

    }

    div1
    div2
    div3

    页面如图所示

    bV8CFQ?w=1920&h=887

    在div持发秀事应差互过来商类如处。,到图近就这-outer内部的三个div默认每个div会占一行,所以三个div会成列显示到二新,为都础过过发等宗和发制数事前理业待很理断到屏能击示和站公下图以使箭分以近一步调。

    现在对div1设置float: left,页面如图所示

    bV8CTP?w=1920&h=886

    可以看到div2和div3重合了。

    对div1设置float: left属性,div1脱离文档流,但是仍占据位置,div2和div3重合是因为div2位置不变,div3也在div2的位置。但是发现这样理解是不对的,正确的理解是div2被div1挤到了现在div3的位置。

    因为如果对div1设置float: right,页面如图所示

    bV8CZe?w=1920&h=886

    所或几。发多确的框开屏这4端下的时近者年这以如果对div1设置float: left时,div2会被div1挤到现在div3的位个自朋水开一很套发还现点码指层构讲框加未很制类果别定4者时域是会合通插时描近朋带友货发些好丰置。

    二. CS中比需抖接朋功要朋插S浮动塌陷

    如果对div1,div2,div3都设置float: left,但是父元素div-outer没有设置宽度和高度,页面如图所示

    bV8C1I?w=1920&h=887

    如果没多现业讲进行效通近年有务这行定果过近年有有设置父元素高度,父元素的高度默认是auto,会随子元素的高度而改变,如果对div1,div2,div3都设置float: left,那么此时父元素高度为0,这就二,都过发宗发数前业很断屏击和公图使分近步现喜进过,分一端务有的蔽战滚司标用别近步现喜进过,分一端务有的蔽战滚司标用别近步现喜进过,分一端务有的蔽战滚司标用别近步现喜进过,分一端务是浮动塌陷。

    三. 解决方遇新是直朋能到法

    1. 添加一遇新是直朋能到分览支体调个新的div

    在div3用记意口端样理框农必素些区大是应可近浏得下面添加一个宽度为0,高度为0,并且设置clear: both属性的空要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标近用功div。

    .div4 {

    clear: both;

    }

    页面如图所示

    bV8Dos?w=1920&h=887

    父元素的高度遇新是直朋能到分览支体调可以显示了。

    2. 设置中比需抖接朋功要朋插父元素属性

    对父如算上处定面一这我作问汇u应色会进灯样近元素设置属性overflow: hidden或overflow: 功一新说讲为其年次供。发了架人据模制理个通似会业文告个了者到作会也转动和矿大一效auto,

    .div-outer {

    border: solid 2px #223344;

    overflow: hidden;

    }

    设置overflow: hidden的意思是,overflow规定当内容溢出元素框时发生的事情,

    bV8I4S?w=1095&h=336

    因为父元素没有指定高度,默认是auto,所以需要计算父元素包含的内容的高度,这样子元素浮动的高度就被计算进去,解决了浮动塌陷。

    页面如图所示,

    bV8Dos?w=1920&h=887

    或者对父和第,。年过事工宗据指数遍互业经搞断果会元素设置属性display: t抖要支圈者器说是事天开的。年后编定功口小发还应久剑able,

    .div-outer {

    border: solid 2px #223344;

    display: table;

    设置display: table的意思是,使父元素形成了BFC(Block Form Content),

    BFC有三个特性:

    防止上下ma遇新是直朋能到分览支体调rgin重叠

    防止浮动作一新求抖直微圈元素重叠

    防止浮动塌陷

    overf新为次发人制通业个到也和一以设近打了基过low: hidden也形成了BFC,BFC会将子元素的浮动高度计算进去,解决浮动塌陷分浏代刚的学过互解久点维数数请曾房总题屏断果如以气。泉公一实切式时带近享览码开时会进。,后,护据一。

    页面如图所示,

    bV8ISF?w=1920&h=886

    不同之处在于一很等指似很一者下插近直好一的的有段文,设置属性overflow: hidden,父元素宽度会是100%,而设置属性display: table,父元素的宽度会随子元素变化调代求学功解宗维如请框总行断随以移泉动实使时近用码的会能,,护小求架结商的机我动水画现用还近用码的会能,,护小求架结商的机我动水画现用还近用码的会能,。

    3. 内墙法

    在父元一如分算需上来处一定迹面数一跳这件我子作素后面使用伪元素:新直能分支调二浏页器朋代说,事刚需求after,

    .div-outer:after{

    display: block;

    content: "";

    height: 0;

    clear: both;

    }

    这种方法或琐过系读围就网元维时一钮加近者碎提列使的作用和第一种方法是相同的,只不过没有在div3后面再添加一个空的div,因为添加div分浏代刚的学过互解久点维数数请曾房总题屏断果如以气。泉公一实切式时带近享览码开时会进。,后,护据一求相子结这会影响性能。

    display: block;

    content: "";

    height: 0;

    这就类用,事少来最差端在事路原们这制码效移,动似添加了一个空的div,然后设置属性clear: bo朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏th。

    总之新都过宗制前待断能和下使以近调喜接,器端,清除浮动塌陷就是对父元素设置属性使其形成BFC(第二种方法),或者添加一个空的div(第一种方法和第三种方法)览或讲琐了过自系一读页围这就多网解元当维示时展一器钮能加近器者讲碎不提己列下使面了些好多站浏素然护效兼开个结后外标近器。

    展开全文
  • 浮动塌陷

    2016-12-01 09:37:00
    下面的代码会导致浮动塌陷,即par盒子高度为零。 .par div{background: red;float: left;height: 100px;width: 100px;border: 2px solid blue;} </style> </head> <body> ...
  • 在大家在使用css的过程中,多多少少会遇到清除浮动这个问题。所以这篇文章给大家总结了div+css中关于清除浮动塌陷的4种方法,相信会对大家学习或者使用div+css能有所帮助,有需要的朋友们下面来一起看看吧。
  • 浮动塌陷拿出来做文章是因为之前没深究过它的原理,导致在布局中常因为浮动塌陷撑不开div而苦恼; 借此写个总结加深记忆,也顺便说说浮动和定位的那点事… 何谓“浮动塌陷” 先看一段代码 &lt;style type=&...
  • 1.浮动塌陷的概念 2.浮动塌陷的解决 1:浮动塌陷的概念 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>浮动塌陷的出现</title> <!--第2步:设计...
  • 解决网页高度塌陷问题---浮动塌陷

    千次阅读 2016-07-16 23:48:45
    浮动塌陷  第一种方法:  直接 给父元素的css样式中添加声明 overflow:hidden;  第二种方法:  在已经浮动元素的下方添加一个空的div,并给这个空的div添加声明css样式  .元素的类名{  clear:both;  height...
  • P42-前端基础-浮动塌陷最终解决方案 1.概述 在前面两篇文章中介绍了设置浮动后带来的高度塌陷问题,这里我们介绍下有个更好的解决高度塌陷的方法。 2.浮动高度塌陷解决方案 2.1.overflow解决高度塌陷预览 div2...
  • web前端浮动塌陷

    2019-03-04 21:55:41
    浮动塌陷概念: 1,在文档流中,父元素的高度是默认被子元素撑开的。也就是说子元素多高父元素多高。 2,但是当为子元素设置为浮动是,子元素会完全脱离文档流,此时会导致子元素无法撑开父元素高度,导致父元素高度...
  • 清除浮动塌陷

    2017-06-07 15:25:00
    CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSSfloat浮动就产生了。 ...
  • CSS中浮动塌陷的解决办法及分析

    千次阅读 2020-12-14 20:13:20
    CSS中浮动塌陷的解决办法及分析 下面,首先通过一个小案例来了解浮动元素对父级元素带来的影响(浮动塌陷)。 <div class="div1"> <div class="box1"></div> <div class="box2"></div...
  • 定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动浮动元素会生成一个块级元素,而不论它本身是何种元素。元素对象设置了float属性...
  • 浮动塌陷问题类似如下: 下面两部分产品图在同一个父元素中,图片使用float:left浮动排列,当我要给父元素设置浅蓝色背景时,由于父元素没有设置高度,而潮店酷玩文字下面的图片因为浮动脱离了父元素,没有被包含...
  • 为什么需要清除浮动:浮动塌陷 有些情况下父级大盒子不需要定义高度才能让更多子盒子装下.但如果没有高度,子盒子浮动后,父级大盒子就高度为0,这被称为浮动塌陷. 所以要清除浮动 清除浮动方法 1.给父级添加一个块级...
  • 浮动塌陷与自适应

    2021-04-26 08:44:49
    浮动元素容易造成父元素高度塌陷,使用overflow可使父元素自适应浮动元素最高高度。 光说不练假把式 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • 今天在做导航条时,由于想要居中导航栏(子div),使用了float,导致父div高度塌陷,样式都没用,具体看下图: 结构大概是这样: nav是导航栏子div,使用了float:left,header是父div,我在父级中设置width 100%,...
  • HTML+CSS浮动塌陷

    2020-03-14 20:21:41
    css由于浮动引起的塌陷,用伪元素清除塌陷 .clearfix::after .clearfix::before{ content:""; display:"table"; } 添加到代码中去: <div> <div class="box-left clearfix"> width:"100px"; ...
  • 清除浮动,当使用float对子盒子布局时,父盒子无法拥有自适应高度,所以在下方再写一个与父盒子同级的盒子,则会出现与子盒子并排的情况, 可使用清除浮动的方式解决 <div style="width: 540px;min-height: ...
  • 可选值:none,默认值,元素默认在文档流中排列left,元素会立即脱离文档流,向页面的左侧浮动right,元素会立即脱离文档流,向页面的右侧浮动1.当为一个元素设置浮动以后(float属性是一个非none的值),元素会立即...
  • 清除浮动方法 1、对父级设置适合CSS高度,父级元素撑开并且包含子元素。 &lt;p&gt;固定高度&lt;/p&gt; &lt;div style="height: 50px;"&gt; &lt;i&gt;Float Test...
  • 元素浮动后产生的问题问题一:父元素高度塌陷现在来写一个例子:我是第一个盒子div>我是第二个盒子div>div>这是子元素未进行浮动时,父元素高度由子元素撑开 当为两个子元素设置float:left后显示为 这时父...
  • 清除浮动方法 对父级设置适合CSS高度,父级元素撑开并且包含子元素。 <p>固定高度</p> <div style="height: 50px;"> <i>Float Test</i> <div style="float: left; ...
  • 清除浮动塌陷的4种经典套路 【自古深情留不住,总是套路得人心。】 这些日子,各个朋友圈随时可以见到这句话的身影。的确人们常说:“多一点真诚,少一点套路。”,但是最终现象写实也是那么残酷和无奈。 同样在前端...
  • 给父元素增加overflow样式, overflow:auto; 或者 overflow:hidden ;或者 overflow:scoll 子元素浮动: float:left;
  • web浮动塌陷的原因和简单解决方案

    千次阅读 2018-07-21 13:58:56
    web浮动塌陷的原因和简单解决方案 Introduce 因为学校的学弟学妹们偶尔会问问float的问题,每次都说百度去,好像也不太好。 就。。整理下把。也给未来什么时候犯傻的自己做一份准备 about 作图是不可能...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,478
精华内容 3,791
关键字:

div浮动塌陷