html css float margin失效原因

Float对象

<div id="right">right</div>

</div>

#left { float: left; }

当我们指定了元素的浮动为left时，意味着其右方的内容将能够流入到左栏的右边，而且能够根据左栏的宽度，自动流入并贴进左栏，而贴进的程度则靠左栏的margin-right来控制，或是右栏的margin-left来控制。

但是前提是#right那个div存在，如果不存在的话，就用margin-left 设置。

时间： 2024-10-06 21:23:19

html css float margin失效原因的相关文章

IE6下 CSS z-index属性失效原因浅析

近日,小码哥遇到一个在IE6下z-index属性失效问题!让鄙人纠结了好半天.心里那个不爽啊!最终虽然解决了俺遇到的问题,同时也做出了如下小结:(希望对"码上赚钱"的侬有所帮助). 其实z-index属性在标准浏览器下其属性值完全按照大小来衡量谁上谁下的.但是在这个各种浏览器横行的年代,又遇到万恶而变态的IE.7时.很多问题就接踵而至了. 在IE6.7下针对z-index属性的问题,最常遇到的就是不管对z-index设置多高的值,哪怕是其父级元素的十倍百倍,该层级不显示还是不显示.那么

DIV+CSS布局重新学习之float/margin/padding

之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

CSS float浮动的深入研究、详解及拓展(一)

概念目录个人感悟之CSS代码的情感化思维个人观点之浮动的意义仅仅是文字环绕显示而已个人观点之浮动的本质是"包裹及破坏" 个人观点之目前大多数浮动应用都不是浮动应该做的个人观点之浮动其实是个魔鬼.混球一.引言你我看待事物的方式不同,价值取向也不同,因为我们有着不同的世界观,价值观.这种世界观的差异不仅仅体现在实际的生活中,也反映在代码上.你我看待代码的方式,或者说是代码在我们情感层面的位置是不一样的,我这里说的是情感层面,与逻辑无关,与算法无关(虽然算法受情感影响).这种看待

CSS float浮动的深入研究、详解及拓展

CSS float浮动的深入研究.详解及拓展(一) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=583 一.浮动的原始意义是什么? 浮动出现的意义其实只是用来让文字环绕图片而已,仅此而已.而我们目前用浮动实现页面布局本不是浮动该干的事情. 二.浮动的本质是什么? 我将浮动的本质定义为“包裹与破坏”! 1. 浮动的“包裹性”撇开浮动的“破坏性”,浮动就是个带有方位的d

小记css的margin collapsing

最近在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录下来,希望初学者少走弯路. 从问题说起先给出demo的源码和截屏,给出一个直观的印象.代码如下: <!DOCTYPE html> <html> <head> <style type="text/css"> html { width: 100

CSS Float nine rules

CSS Float nine rules w3 css float nine rules CSS Float Rule1 CSS Float Rule2 CSS Float Rule3 CSS Float Rule4 CSS Float Rule5 CSS Float Rule6 CSS Float Rule7 CSS Float Rule8 CSS Float Rule9 finally 参考文章注:本文是对众多博客的学习和总结,可能存在理解错误.请带着怀疑的眼光,同时如果有错误希望能指出.

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

解决子级对象使用css float浮动而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha

CSS float 属性

Float定义: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 注释: 假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为

您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

一.CSS元素隐藏在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ } { position: absolut