当前位置: 首页 > Web前端 > CSS

CSS让浮动和清空浮动更容易理解(图文皆有)

时间:2023-03-30 15:31:18 CSS

1.什么是浮动(floating)float属性定义了元素浮动的方向。float:left元素向左浮动。float:right元素向右浮动。浮动:无默认值。元素不会浮动,而是出现在它们在文本中出现的位置。float:inherit指定应从父元素继承float属性的值。看一段简单的代码:floatleft

floatright
meow
.child1{向左飘浮;高度:500px;宽度:70%;背景:#aa0;//黄色}.child2{浮动:正确;高度:300px;宽度:30%;background:#0aa;//green}.child3{background:#a0a;//purple}二、什么是明确的?clear属性指定段落的左侧或右侧不允许有浮动元素。clear:left不允许左侧的浮动元素。clear:right不允许右侧的浮动元素。clear:both不允许左右两侧的浮动元素。清除:无默认值。允许浮动元素出现在两侧。clear:inherit指定clear属性的值应该从父元素继承。比如上面的例子,我们加上clear:both;到child3以清除浮动。(child3的左右两边不允许浮动元素,自然也就不会跟着两个浮动元素的屁股了~)那么,只允许一侧浮动是什么感觉呢?原来是紫色的:child1向右漂浮
child2向右漂浮哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈背景:#aa0;//黄色}.child2{浮动:正确;background:#0aa;//green}然后,添加clear:right;tochild2,在child2右边不允许有浮动元素,所以child2浮动到下一行。所以,当添加clear:left;给child1,为什么它不起作用?在这里留下一个小彩蛋,欢迎留言讨论~3.浮动的影响浮动最大的影响是当父元素只包含浮动的子元素时,父元素的高度会塌陷(高度变为0).如酱紫:(parent高度为0,粉色背景无法显示)child1向右浮动child2向右浮动.parent{background:#FBC;//pink}4、清除浮动的方法是在父元素末尾添加一个空的div。好与坏:如果页面上有很多浮动布局,就会添加很多空的divchild1floatsrightchild2向右浮动.child1{float:right;背景:#aa0;}.child2{浮动:正确;背景:#0aa;}可见,空div的高度为0,位于父框的底部,这样父框就可以恢复到应有的高度。为什么要加在最后呢?如果在中间加上,效果会是紫色的:由于空div的左右两边不允许浮动元素,所以会另起section,导致box位置的效果好像child2清除了floatingon右边,child2跑到child1下面。但是为什么父parentbox的高度是child1box的高度呢?因为浮动元素脱离了标准文档流,元素“漂浮”在标准流之上。父框的高度与child1和child2的位置无关。空div的“高度”是父框的“高度”。见证如下:child1向右浮动child2向右浮动child2向右浮动最后一个空的div在哪里,父级的高度就会在那里。在父元素上设置overflow属性原理:设置overflow:hidden或overflow:auto,浏览器会自动检测浮动区域的高度(知道父框内容是否溢出)优点:浏览器支持好缺点:如果子元素超过父元素的大小会被隐藏,或者父元素上出现滚动条child1向右浮动child2向右浮动overflow:auto时;设置后,父元素上会出现滚动条:伪元素原理:类似设置clear属性优点:浏览器支持好,一般child1floatsrightchild2向右浮动.clearfix{zoom:1;//zoom(IE独有属性)可以解决ie6和ie7display:block;的浮动问题}.clearfix:after{内容:“。”;//内容:””;可见性:隐藏;显示:块;高度:0;明确:两者;}完~如有不足之处还请指教,万分感谢!欢迎路过的大侠讨论~