(3.19)消除浮动的区别.

希赛网 > 问答 > 程序开发 > Web开发 > Web前端 > overflow:hidden跟clear:both

overflow:hidden跟clear:both

overflow:hidden和clear:both

  overflow 属性规定当内容溢出元素框时发生的事情。所有主流浏览器都支持。

  

  <div class="a">
<div class="a-left">我是A浮动在左边</div>
<div class="a-right">我是B浮动在右边</div>
</div>

  <style type="text/css">
div.a{border:1px solid blue;width:500px;height:30px;overflow:hidden;}
div.a-left{width:200px;float:left;height:30px;margin-top:6px;}
div.a-right{width:400px;float:right;height:30px;margin-top:6px;}
</style>

  父div设置了overflow:hidden,此时子div的宽度超出父div,则浮动在右的子div被隐藏掉,而不是将父div水平撑开。超出的部分就会被隐藏----隐藏溢出的含义。效果:

  

  如果不对父元素进行设置即默认情况则会出现如下效果:

  

  clear 属性规定元素的哪一侧不允许其他浮动元素。

  

时间: 2024-11-09 00:11:14

(3.19)消除浮动的区别.的相关文章

webbasic之如何消除浮动影响

1.如果最终不需要显示父元素的边框,只需要处理对p的影响: p{     clear:left/right/both } 以上可消除左浮动,右浮动,和两者都有时的影响,注意只能消除对叔叔辈的影响. 2.如果想消除对父元素的影响: -在父元素内加一个空的块. -在这个新块上clear -原理? 因为新加进去的块没有浮动,依然占据流(此时新块也是没有高度的),对它clear会使它露出来(露出来的形式同p) 从而拉伸了流的高度,使得父元素有了高度 <body>    <div id="

使用样式“clear”和“overflow”消除浮动元素对环绕行框的影响

为元素设置“float”样式之后,元素会脱离标准文档流,不再占据原来的空间.后续元素会向前移动,占据这个新的空间.后续的文本会围绕着浮动元素分布,形成一种环绕布局的现象. 示例代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test page</title> 5 <meta charset="utf-8"> 6 <style type="text/c

消除浮动的方式

1.空div <div class="clearfloat"> div2 </div> .clearfloat{clear:both} 2.父级定义overflow:hidden必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度3.使用伪类 清除浮动 div::after{     content:".";             display:block;     

消除浮动方法

1.css中用clear:both,指该元素左右不会出现浮动元素 2.浮动元素后添加块级元素,对该块级元素设clear:both 3.用伪元素:after,在父元素最后添加一个不显示的块级元素 4.用overflow,属性值除visible以外都可以 详细链接:https://blog.csdn.net/u012207345/article/details/78279961 原文地址:https://www.cnblogs.com/fur-mat/p/11316851.html

浮动相关理解,以及清除浮动的方法总结

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>清除浮动</title> 5 <meta charset="utf-8"> 6 <style> 7 body { margin:0; padding:0; font:normal 12px/1.5em "Microsoft Yahei", Verdana, Arial, Helvetica, s

CSS那些事儿-阅读随笔3(清除浮动)

浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both.left和right 3个属性值清除由浮动产生的左.右浮动效果. 一.浮动现象例子 下面举一个很简单的浮动的例子,假设一个float_box(背景色为#aff)中包含两个div,且一个是左浮动(float:left),另一个是右浮动(float:right).在float_box外再添加一个没有浮

圣杯布局和双飞翼布局的理解和区别

圣杯布局和双飞翼布局基本上是一致的,都是两边固定宽度,中间自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染.解决方案大体相同,都是三栏全部float:left浮动,区别在于解决中间栏div的内容不被遮挡上,圣杯布局是中间栏在添加相对定位,并配合left和right属性,效果上表现为三栏是单独分开的(如果可以看到空隙的话),而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在

盒子模型、网页自动居中、float浮动与清除、横向两列布局

1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img input) 盒子模型:边框(border)外边框(margin)内边框(padding)内容(content) 盒子3D模型:border. content+padding .background-img.background-color.margin <html> <head> <

清除浮动的几种方法

1.:after消除浮动,父元素需加zoom:1,建议使用, 2.在父元素的末尾加一个孩子,<div style="clear:both"></div> 3.在父元素中增加overflow:hidden; 不能和position配合使用,因为超出的尺寸的会被隐藏 4.在父元素中增加overflow:auto;前提是必须定义width 或 zoom:1,并且不能定义height 5.父元素一起浮动,不推荐使用 6.给父元素增加display:table,不建议使用