解决css的float父div没有高度

最新推荐文章于 2024-03-02 01:01:42 发布
最新推荐文章于 2024-03-02 01:01:42 发布
阅读量202 收藏
点赞数
文章标签： CSS ASP HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sz_kain/article/details/83701427
版权
在做页面设计常会碰到css的float父div没有高度的情况，HTML代码设计
view plaincopy to clipboardprint?
<div class='box'>
<div class='float_left'></div>
<div class='float_right'></div>
</div>
在CSS里定义了如CLASS类这样的浮动后，你会发现父div名box没有高度，所以又时候你可能感觉到父div的margin没有效果，这种情况下，你只需要给父div加个overflow:hidden就可以了，譬如
.box{overflow:hidden}

[url=http://www.w3school.com.cn/css/pr_pos_overflow.asp]W3C OVERFLOW[/url]
江枫戏渔火
关注
用纯CSS让子DIV自适应父DIV的高度
qq_43059062的博客
08-12 8882
我们在前端布局时经常使用栅格布局，而当栅格布局中的某个子元素高度发生变化，外层的父元素高度也会发生变化，如果此时想让其他子元素的高度依旧填充父元素，我们应该怎么做。 这是HTML部分代码，此时左侧的高度比右侧的高。 <div class="out"> 　　<div class="a"> <p>左侧的内容</p> <p>左侧的内容</p> <p>左侧的内容</p>
CSS浮动float父div没有高度的问题
JeamKing的专栏
03-29 7646
<br />如下所示，子元素 div2 本身具有高度和宽度，但由于其具有float:left；属性后。其父元素 div1 不具有高度。<br /><html><br />     <head><br />     </head><br />     <body><br />         <div id="div1"><br />       
解决子级用css float浮动 而父级div没高度不能自适应高度
逆袭的菜鸟X
07-19 190
1、使用css clear清除浮动 对父级div标签闭合前加一个clear清除浮动对象。 加clear效果完整div css代码 <html> <head> <meta charset="utf-8" /> <title>父div不自适应高度实例</title> <style> .divcss5 { width: 500px;
解决子级用CSS float浮动 而父级div没高度不能自适应高度
qq_26780317的博客
10-10 291
    当在对象内的盒子使用了float后，导致对象本身不能被撑开自适应高度，这个是由于浮动产生的原因。     如何解决父div对象自适应高度，方法有三种，接下来逐一介绍。     1、首先先看html源代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&...
css子元素有高度，父元素没有高度
u011511086的专栏
08-21 613
css子元素有高度，父元素没有高度
CSS教程：div设置float后高度不自动增加
01-19
因为从这个题目我们可以更加容易的看出，如果您没有闭合(清除)浮动元素，它将造成的后果是—–div的高度不能自动增加。言归正传目前用来清除“闭合(清除)浮动”的方法，主要是一下四种：1.额外标签法这种方法就是向...
子div含float，父div高度自适应的div+css布局写法
01-19
div+css高度自适应网页布局，子div含float，父div高度自适应，已经通过测试的浏览器：ie6、ie7、ie8、火狐、Chrome。 代码来源： http://www.positioniseverything.net/articles/onetruelayout/equalheight
DIV设置float后父容器无法定位高度的问题解决方法
09-25
这些属性值同样可以创建块格式化上下文，解决高度塌陷问题。值得注意的是，不同的display值对布局有着不同的影响，需要根据实际的布局需求来选择合适的属性值。 5. 使用现代CSS布局解决方案。对于更加复杂的布局，...
css float left布局换行不正常问题的解决
09-22
在讨论CSS中float布局换行问题之前，首先要了解CSS float属性的基本原理。float属性是一种非常有用的CSS布局方式，它允许元素向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动元素的边框为止。使用float属性...
元素float后，父元素没有高度问题
ISaiSai的专栏
07-14 2085
最简单解决方法：父元素添加
html设置float后没有高度解决
····
03-27 1156
[url]http://www.chinaz.com/design/2008/1024/41932.shtml[/url] 2. 使用after伪类 这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。 这种方法兼容性一般，但经过各种 ha...
float浮动子元素后导致父元素无高度(0)解决方法
王佳斌
07-14 5587
前言 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。 使用float左浮动后，元素便脱离了...
记录一个父级div不能被子级内容撑开的解决方法，父级div没有高度的解决方法。
热门推荐
lihang199的博客
07-19 1万+
文章出处和来源网址：http://www.divcss5.com/jiqiao/j612.shtml 今天遇到一个可能你在项目里也会经常遇到的问题如下图，解决以后转载过来自己做个记录。 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后，导致对象本身不能被撑开自适应高度，这个是由于浮动产生原因。 如何解决父div对象自适应高度，方法有三种，接...
css 解决内容float后没有高度的问题
最新发布
u010802056的博客
03-02 209
如使用：如：<div style=”clear:both;”></div> 就可以解决塌陷的问题。个人推荐使用 额外标签+clear:both （W3C推荐方法，兼容性较好）注意这个元素是写在float的父级元素的后面。
css中父元素没有高度，子元素高度填满
qq_42858057的博客
05-16 5757
一、问题： 如下代码，父元素father使用flex布局，不设高度，子元素son2高度设置为200px，子元素son2撑开了父元素father，son1无法填满父级元素高度。 <body> <div class="father"> <div class="son1">这是子元素son1</div> <div class="son2">这是子元素son2</div> </div> </body> &lt
CSS 父级元素高度为0(父元素坍塌) 解决方案
子燕若水的博客
09-04 5515
CSS 中父级元素的高度一般由子元素撑开，不会特意设置高度，但是以下情况会造成父级元素高度坍塌，也就是高度为零，影响后面元素的排版。主要有两个原因： ）子元素使用绝对定位 ）子元素浮动 1）子元素使用绝对定位，父元素没设置宽高 此时子元素已从正常文档流中移除，并且不会在页面布局中为该元素创建空间。所以父元素依靠子元素撑起其宽高时会为0； 解决方案：子元素的绝对定位改为相对定位 改为相对之后页面布局时会为子元素创建相应的空间，此时没设置宽高的父元素也会被子元素撑起来了。 ...
子div有内容，父div高度为什么为0？（含解决方法）
qq_36470686的博客
09-26 9337
我们先看一段测试代码： &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .aBox{ background-color:blue; } .bBox{ background-color:yellow; float:left; height...
div定义float:left;后height不会自适用高度，怎么解决
99guo的专栏
04-14 7588
第一种就是: 后面加个DIV清楚浮动；建议不使用这方法； 无标题文档无标题文档无标题文档 有文档有标签文档有标签文档有标签文档有标签文档有标签文档 第二种就是你给.a加个属性｛ overflow:auto;｝ 就可以了，这样比第一种节约了代码； zoom: 1; overflow:auto; 两个一起才是清楚浮动！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值