对clear float 的理解

之前自己对于清除浮动的用法比较模糊 ，如果用到的话，一般都是采用简单粗暴的方式解决，就是直接用overflow：hidden，但是越用久就会发现其实有BUG，这个BUG正是overflow：hidden带来的，因为细究overflow：hidden还有一个默认效果是溢出隐藏.,如果要在子元素里再添一个div，div往下移动的话，超过了子元素的高度就会做溢出隐藏处理，所以效果不佳，所以后来自学了另一种清除浮动的方法，就是伪类.clearFix:after{content:‘.‘;height:0;clear:both;visibility:hidden;display:block;}。这种方法比较OK的，之前的BUG不会出现，只是在做网页的时候，一定要记住一点，就是伪类的兼容性问题，ie6是不支持主要的写法的，所以加.clearFix{*zoom:1;}.只是自己的一些理解！与君共勉！

时间： 2024-10-12 04:44:22

对clear float 的理解的相关文章

对css中clear元素的理解

clear:left;表示左侧不能有浮动元素. clear:right;表示右侧不能有浮动元素. clear:both;表示左右两侧都不能有浮动元素. 但在使用时,还得考虑css优先级问题.相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高 . 当所有元素的clear属性都设为right时,由于优先级的原因,并不是所想的那样:右侧没有浮动元素,而是右侧出现了浮动元素. 比如下面的代码: <html> <head> <style type="text/css

关于css中float的理解

感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看效果.在这篇博客里做个总结. 1. 设置float后对后面元素的影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

典型的检查对float精度理解的代码

...1 vx = 0.0000007f * (rand()%9000-rand()%9000); 2 vy = 0.0005f * (rand()%9000); 3 vz = 0.0000001f * (rand()%9000); 4 pList_particle[i].m_velocity = Vector3(vx,vy,vz); ... 1,3行代码的vx和vz的值域可以通过数学方法计算,而0.0000007f和0.0000001f在运算时是否存在精度丢失从而影响到运算结果? 分析这种问题

CSS demo:flaot &amp; clear float

1,首先,我们布局基本的div块: 如下代码所示,我们在body里面写3几个基本div块,然后设置一些基本属性: 效果图: 2,加入基本浮动 现在我们想让红色div放到绿色div右边,我们在两个div中加入浮动 效果图: 3,添加一个处于标准流的div 效果图: 添加了一个处于标准流的div中,可以很明显的看出一种float的效果,红块div和绿块div像云一样漂浮在橘黄色div上面,这个效果很贴切的符合float这个词. 但是可以明显的看出,浮动会带来一个遮盖的不良效果,然而在真正的网页设计中

position与float个人理解

css中定位(position): 其一:position:relative:按元素的原始位置对元素进行移动  即  相对于原始位置移动,不会影响其他元素的位置. 其二:position:absolute:生成绝对定位元素,是相对于父级元素进行移动,会影响其他元素. float:对DOM元素中的任一元素float之后,这个元素将按照块级元素进行处理.

float的理解

1.浮动包裹性——浮动具有让元素按displya:inline-block显示(文字环绕的效果).2.浮动破坏性——浮动元素脱离标准流,漂浮在标准流之上,破坏了正常文档流的显示顺序.浮动元素的下一个元素,会和上一个非浮动元素底部垂直对齐.浮动元素的垂直位置会和上一个 标准流元素(block)的底部对齐(元素的顺序是HTML代码中div的顺序决定的).3.浮动跟随性——如果A.B两个元素(block)挨着且两个元素都进行浮动了,那么B元素会跟在A元素后面显示成一行,只到宽度不够时才会被挤到下一行.

CSS浮动(float,clear)通俗讲解

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下

验分享：CSS浮动(float,clear)通俗讲解

经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素

经验分享：CSS浮动(float,clear)通俗讲解

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下