浮动引起的问题和解决方法

2024-08-28

浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

浮动引发的高度塌陷问题高度塌陷问题的产生 BFC(Block Formatting Context)的引入元素开启BFC后的特点开启BFC的元素不会被其他浮动元素所覆盖开启BFC的元素不会发生父子元素外边距重叠开启BFC后可以包含浮动的子元素如何开启BFC 设置元素浮动将元素display属性设置为inline-block.table等 overflow属性设置为非visible值开启定位高度塌陷解决方法1: 父元素高度写死高度塌陷解决方法2: 为父元素也设置浮动高度塌陷解

css 关于"浮动边距加倍"及其解决方法-------解决方案是在这个div里面加上display:inline;

写div代码的时候,经常发现明明宽度算得很准确,但是莫明其妙的会和计划的布局不太一样- -|||开始以为自己代码写的有问题,拼命找bug也一无所获,最后可能会稍微修改样式来达到想要的效果,但终究也是外道..昨晚刨根问底了一次...我靠..原来是IE的问题-_,-今天跟半半唠叨起这件事,还说要加入反IE的行列来着...为啥别的都没问题就IE有问题嘛..-x- 浮动边距加倍错误(The IE Doubled Float-Margin Bug )如果某条边与浮动方向同向,则向该边上的浮动框应用边距时,

《----css样式---------浮动带来的影响与解决方法---------------》

浮动就是让我们的元素脱离标准文档流,目的是为了布局好看! 浮动的现象: 脱离标准文档流被叫做脱流,同时会出现字围现象. 浮动的元素会相互贴靠,而且如果父容器空间足够大,则浮动的元素会正常紧靠也就是后一个元素会紧靠前一个元素.如果父容器空间不够大,那么元素会找上级的上级去紧靠,如果还找不到则继续找上级紧靠,没有了上级可靠那就靠边. 浮动的元素不分块级和行内类别,也就是说都可以设置宽高可边距. 浮动以后,同一行内的元素以顶边作为基线对齐. 为什么浮动会带来影响??????因为浮动元素不占父标签的高度

浮动产生的高度坍塌解决方法以及使用siblings()方法获取同级元素

高度坍塌:如果一个没有设置高度div里的元素都是浮动元素,这个时候就可能产生高度坍塌,因为div的高度都是普通元素撑起来的,div里的元素浮动之后,元素就会脱离文档流,所以父级的div高度就可能为零,解决办法,使用after伪元素: .div:after { content: '.'; display: block; height: 0; visibility: hidden; clear: both; }这里的.div指的是父级div.siblings()方法利用siblings()可以获取同

解决IE6下浮动层固定定位的经典方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解决IE6下浮动层固定定位的经典方法</title> </head> <style> *{padding: 0; margin: 0;} html,body{width: 100%; height: 100%;} html{overflow: hidden; border:

li浮动引起ul高度坍陷的解决方法

我们都知道float在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.元素浮动之后,它脱离当前正常的文档流,所以无法撑开其父元素,造成父元素的高度塌陷.如下的代码就是li向左浮动后,ul高度坍陷,所以border就显示为一条线.代码.效果如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

子级用css float浮动而父级不能自适应高度解决方法

解决子级对象使用css float浮动而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种. 方法一:对父级设置固定高度此方法可用于能确定父级div内子级对象高度. 如果我们知道内部div高度100px,那对父级设置css height为100px看看效果. 此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度.此

子元素浮动父容器高度不能自适应的CSS解决方法

百度标题:子元素浮动父容器高度不能自适应的CSS解决方法从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F12查看发现,是因为子元素浮动了导致的,然后在父级元素加了clear:both好了. 所以查询了一下,浮动导致的问题.

CSS设置浮动导致背景颜色设置无效的解决方法

float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开解决方法: 对父元素设置高度对父元素设置 overflow:hidden清除浮动把父元素也设置为float浮动结束标签前加代码:<div style="clear:both"></div>

CSS-垂直|水平居中问题的解决方法总结

题外话:前两天和专业老师探讨最近的一个项目,涉及到对一个浮动的盒子局中的问题,老师的解决方法打开了我的新思路.让我有了总结一下平时的居中问题的想法.不然可能忘掉了以后又要到处寻找解决办法了.另外也给我一个启示:启示解决方法有很多,就看你能不能对知识灵活运用.也是通过这件事我体会到了"灵活运用"的真正含义.做事情是这样,做技术尤其要这样. 这个总结要一直在整理完善中,以后有了什么新的想法.新的解决办法都要再修改.可惜不在github中,不然可以集思广益了. ---------------

ie6,ie7,ie8 css bug兼容解决方法

IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 普通IE css bug bug名称影响版本描述 Image Label Focus Bug IE8,IE7,IE6 <img>元素在<label>元素之内,单击时,焦点不会转移到相应的表单控件按钮Margin-A

ie6 z-index不起作用的解决方法

一.概念 z-index伴随着层的概念产生的.网页中,层的概念与photoshop或是flash中层的概念是一致的.熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上面显示,如果层发生重叠,层级高的会覆盖层级低的,如果非透明或半透明,则会遮挡. 在photoshop中层的高低就是靠手动调的,鼠标拖拽,或是ctrl+]或是ctrl+shift+[快捷键改变层的次序.如下图,鼠标拖移改变层次序的过程中: 在flash中类似,可以手动改变图层次序,或是使用as脚本,例如

margin-top失效的解决方法

异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况按照网上的说法,我就是这个现象了两个层box1和box2,box1具有浮动属性,box2没有,这时候设置box2的上边距margin-top没有效果. 这是网上的解决方法(并不适用我的情况)http://developer.51cto.com/art/201008/222728.htm 本文向大家描述一下margin-top失效的解决方法,margin-to

CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

margin-top无效的解决方法

先上代码: <div id="content" style=" width:750px; height:300px; background:#C29A29; margin-top:100px; margin-left:150px;"> <ul class="clearfloat" style="border-top:#630 solid 2px; border-bottom:#630 solid 2px; paddin

浏览器css bug及bug解决方法

Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px;font-size:0;line-height:0;}IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高如何解决IE6及更早浏览器浮动时产生双倍边距的BUG? 方法: #test{display:inline;}当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况,设

div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）

原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. 大体结构 <div class="outer"> <div class="inner1"></div> <d

10个常见的IE bug和解决方法

1.IE6 幽灵文本(Ghost Text bug) 在我写本文之前,我遇到了这个bug.它相当的古怪和滑稽.一块不知哪来的重复的文本,被IE6显示在靠近原文本的下面.(译注:也可以参看 Explorer 6 Duplicate Characters Bug 获得bug演示).我无法解决它,所以我搜索它,果然,这是另一个IE6的bug. 对此有许多解决方法,但是没有一个对我的例子有效(因为网站的复杂性我无法使用其中的一些方法).所以我使用了hack.在原文本之后增加空格看起来能解决这个问题. 但

ie6,ie7,ie8 css bug汇总以及兼容解决方法

1:li边距“无故”增加任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引起,padding的上下值对li有影响,左右无影响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许还会引起其他不必要的怪现象. 解决这个问题的方法,其实很简单,既然是有ul引起的,就设置ul的显示形

偷懒的inline-block解决方法

最近这几天看了inline-block的用法,用它来代替浮动实现水平排列很不错,只是要解决一下浏览器兼容和间隙的问题.关于ie6,7的兼容问题 <inline-block 前世今生>(http://ued.taobao.com/blog/2012/08/inline-block/)里讲解的很细致深入,解决办法也讲的很详细,在这里自己就简单记录下. 首先就是inline-block在ie6,7的表现,行内元素在设置inline-block之后表现出来的就是水平排列,但是块级元素仍然是自上而下排列

浮动引起的问题和解决方法

热门专题