`

overflow:hidden和clear:both

    博客分类:
  • css
阅读更多

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 属性规定元素的哪一侧不允许其他浮动元素。

 

 

<style type="text/css">
div#left-div {float:left;width:40%}
div#right-div {float:right;width:60%}
div#bottom-div {clear:both;width:100%}
</style>
<div id="right-div">i'm right!</div>
<div id="left-div">i'm left!</div>
<div id="bottom-div">i'm bottom!</div>

    

 

 

 

 

http://www.chinaz.com/design/2008/0818/35473.shtml

http://www.w3cschool.cn/pr_pos_overflow.html

  • 大小: 33 KB
  • 大小: 25 KB
  • 大小: 6.2 KB
  • 大小: 9 KB
  • 大小: 3.7 KB
分享到:
评论

相关推荐

    overflow:hidden line-height clearfix:after使用方法介绍

    本篇文章将详细介绍三个重要的CSS属性:`overflow:hidden`、`line-height`以及`clearfix:after`,并提供它们的使用方法和实际应用场景。 1. **`overflow:hidden`**: `overflow:hidden` 是一个用于处理元素内部...

    高度塌陷的产生条件和解决方法

    我们可以给最后一个浮动元素的后面添加一个空标签,并声明 clear:both;来解决高度塌陷问题,例如: ``` &lt;div class="child_1"&gt;... &lt;div class="child_2"&gt;... &lt;div style="clear:both;"&gt; ``` 这种方法可以...

    CSS使用特效

    *{ margin: 0; padding: 0; border: 0 none; outline: 0; } ... font-family: "Lucida Grande", "Verdana", sans-serif;... font-family: "Myriad Pro", "Lucida Grande", "Verdana", sans-serif;... clear: both; }

    JavaScript 逼真图片倒计时实现代码

    逼真的Js图片倒计时,显示剩余小时、分钟、秒数。仅用了一张图片就搞定了,与纯网页版的不太一样哦。现在用图片模拟LED的效果,还真不错,希望大家彻底喜欢哦。 逼真图片倒计时 ...clear:both;overflow:hi

    清除浮动的几种方法PPT学习教案.pptx

    原理:因为overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。注意:必须定义width或zoom:1,同時不能定义height。优点:简单,代码少,浏览器...

    使用font-size:0px 来制作跨浏览器的inline-block css属性

    像下面图中的布局,如果排列的元素是登高的话,相信很多人都会使用浮动来布局,不过如果元素不等高的话,不添加多余的标签,浮动布局是很难实现下图中的效果。如果遇到这种情况,可以使用inline-block来布局。...

    ff浏览器下兼容height:auto的问题

    无论是使用`clear:both`、设置`overflow:hidden`还是定义clearfix类,都能有效地确保网页在各种浏览器中的兼容性和一致性。通过这些技巧的应用,开发者可以更加专注于网页功能和内容的设计,而不用担心跨浏览器的...

    css如何清除浮动常用的方法有哪些

    overflow:hidden;} #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height 方法3: #test{zoom:1;} #test:after{display:block;clear:both;visibility:hidden;height:0;content:”;} #test为浮动元素的...

    用css使单行超出指定宽度的内容切去并在结尾出现省略号

    clear: both; } p span { float: left; max-width: 175px; /* 容器宽度减去省略号的宽度 */ } p:after { content: "..."; } ``` 这样,`p`标签的宽度加上`span`和省略号的宽度总和会超过容器宽度,但`...

    Asp.net网站模板下载

    .menu_box_style2_2{clear:both;height:50px;} .menu_box_style2_2_1{float:left;width:250px;height:50px;overflow:hidden;text-align:left} .menu_box_style2_2_2{float:right;width:720px;height:30px;margin:20...

    css别忘记清除浮动clear:both

    这种方法是最简单的清除浮动方式之一,只需要在浮动元素后面添加一个空的`&lt;p&gt;`标签或者`&lt;div&gt;`标签,并应用`clear:both;`样式即可。 **示例代码**: ```html .clr { clear: both; } &lt;div id="left"&gt;Left ...

    让DIV兼容的方法

    - **CSS语法**:熟练运用CSS的各种选择器和属性,特别注意`float`、`clear`、`overflow`和`line-height`等属性的使用。 - **HTML标签**:熟悉并掌握`div`、`ul`、`li`、`dl`、`dd`等常用标签的使用方法。 #### 三、...

    标签增加CSS的overflow属性来清除浮动

    为了解决这个问题,我们可以使用CSS的`overflow`属性来清除浮动,而无需依赖传统的`clear:both`方法。 `overflow`属性在CSS中主要用于控制内容溢出元素边界时的行为。当设置为`overflow:auto`或`overflow:hidden`时...

    css清除浮动的几种方法以及对应规范说明

    1、{clear:both;}设置了clear 属性的元素,其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染,使包含浮动元素的容器高度正常。所以适用于浮动元素后面容器之内有个非... 3、{overflow:hidden;}或overflow:aut

    常用的HTML+CSS标签480个(带中文解释说明)

    浏览器兼容 leftmargin="0" topmargin="0" ...clear:both;overflow: auto;&lt;父标签&gt; div撑起来 -moz-background-size:cover; -webkit-background-size:cover; -o-background-size:cover; background-size:cover;

    css1--关于float的div撑不起父div的问题

    可以在父元素后面添加一个空元素,并设置`clear:both`或`clear:left/right`。这会使空元素下方的内容不再环绕浮动元素,从而“清除”浮动的影响,恢复父元素的高度。 ```html &lt;div class="child float-left"&gt;&lt;/...

    使用CSS的overflow属性防止float撑开div的方法

    许多应征前端工程师的人,在面试时都会被问到这类float的问题。例如:div元素内的两个子...不过我今天意外发现,原来overflow: hidden;也会撑开div呀!如下:长知识了。 XML/HTML Code复制内容到剪贴板 &lt;body&gt; 

    什么是高度塌陷 以及高度塌陷的解决办法

    但是,当子元素使用绝对定位或相对定位时,`overflow: hidden`会隐藏超出父元素边界的任何内容,可能导致一些预期外的结果。 3. **添加清浮动的空div**: 在浮动子元素的末尾添加一个空的div,并设置CSS样式`clear...

    前端面试题.docx

    * 结尾处加空div标签clear:both原理:添加一个空div,利用CSS的clear:both清除浮动,让父级div能自动获取到高度。 4. CSS Sprites: CSS Sprites是一种将多个背景图片合并到一张图片文件中的技术。可以使用CSS的...

    清除浮动的几种方法详解

    4. **第四种方法:使用伪元素和`clear: both`** 这是CSS3引入的一种方法,通过在父元素上定义一个伪元素(`:after`),并设置`clear: both`。同时使用`zoom: 1`触发IE浏览器的hasLayout特性。 ```css .box:after {...

Global site tag (gtag.js) - Google Analytics