`
shuaigg.babysky
  • 浏览: 567744 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

浮动元素 clear 与 父元素添加 %1 方案相同

    博客分类:
  • css
 
阅读更多

给父元素加上 overflow:auto; _height:1%;

 

或者是在浮动元素的下方添加

clear : both ; overflow : hidden;

分享到:
评论

相关推荐

    父元素的高度为0利用伪元素:after清除浮动可解决问题

    after`伪元素的`content`属性设置为空字符串(`content:""`),然后将其`display`属性设置为`block`,使其成为块级元素,最后设置`clear:both`,我们可以达到与添加额外`<div>`相同的效果,即清除浮动并恢复父元素的...

    清除浮动clear:both的应用详解

    在这个例子中,`.container`是包含浮动元素的父容器,添加了`:after`伪元素后,它会在`.container`内容结束后插入一个清除浮动的元素,达到相同的效果。 在某些情况下,可以直接在下一个非浮动元素上设置`clear:...

    Containing Floats (Complex Spiral Consulting).pdf

    1. **清除浮动:** 使用`clear`属性或伪元素`::after`来清除浮动效果,使父元素能够正确包裹其内的浮动元素。 2. **使用Flexbox或Grid:** 在现代浏览器中,使用Flexbox或Grid布局可以更简单地实现相同的布局效果,...

    .clear 万能清除浮动(clearfix:after)

    `:after` 伪元素被添加到具有 `.clearfix` 类的元素后面,它的 `content` 属性设置了一个不可见的字符,`display: block` 让这个内容作为块级元素存在,而 `clear: both` 则确保了其后的元素不会与浮动元素重叠。...

    CSS兼容性大全.docx

    浮动元素可能导致后续非浮动元素浮动上去,为避免这种情况,可以使用`clear:both`或者创建一个空的`div`,并赋予`clear:both`属性来清除浮动。另一种方法是使用CSS的`::after`伪元素来清除浮动。 9. **自适应高度...

    css部分bug解决

    浮动元素与宽度计算问题 **问题描述**:在IE浏览器中,当元素设置了`float`属性并指定宽度时,可能会出现宽度计算不准确的问题。 **解决方案**: - **display: inline**:使用`display: inline;`可以让浮动元素...

    第27章 CSS传统布局[下]

    浮动元素可能导致其父元素高度计算错误,因此需要使用`clear:both`或CSS伪类`:after`与`content`属性创建清除浮动的解决方案,以确保父元素包裹所有子元素。 这些知识点构成了CSS传统布局的基础,理解并熟练掌握...

    css样式BUG大全

    - 在浮动元素后面添加一个空的`div`,并为其设置`clear: both;`属性,以清除浮动影响。 - 使用`display: inline;`来模拟行内元素的行为,从而避免外边距折叠。 - 代码示例: ```css #IamFloat { float: left; ...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    解决方法是为左侧浮动元素添加负`margin-right`,例如: ```css #left { float: left; width: 50%; } *html #left { margin-right: -3px; } ``` ### 7. “捉迷藏”问题 复杂的布局中,尤其是包含多个链接和...

    浏览器兼容问题解决方案

    3. **浮动元素产生的双倍距离**: 在设置`float`属性的div中,当设置`margin`时,IE会产生双倍的距离。通过添加`display: inline;`可以解决这个问题,如`#box{ float:left; width:100px; margin:0 0 0 100px; ...

    目前比较全面的浏览器CSS BUG兼容汇总

    清除浮动是为了防止父元素因浮动子元素而高度塌陷。可以使用`clear: both;`或创建一个清除浮动的空元素。例如: ```css .clearfix:after { content: ""; display: table; clear: both; } ``` 并在需要清除...

    Firefox下margin-top会出错

    - 如果元素的`margin`和其父元素的`margin-top`折叠在一起,则盒子模型的`border-top`边界定义与其父元素相同。 7. **根元素的垂直`margin`不会被折叠**。 #### 四、解决技巧 为了防止`margin`折叠带来的问题,...

    css浏览器兼容性总结.pdf

    可以使用`clearfix`类来清除浮动,或者在父元素中添加`overflow:hidden`,或者使用伪元素`::after`来清除浮动。例如: ```css .clearfix::after { content: ""; display: table; clear: both; } ``` 或者 `...

    IE浏览器和火狐浏览器兼容问题.doc

    确保浮动元素之后添加一个清除浮动的元素,如`<div style="clear:both;"></div>`,或使用CSS的`clearfix`类。 这些技巧和方法可以帮助开发者解决IE与Firefox之间常见的CSS兼容性问题。然而,随着现代浏览器的普及和...

    浏览器兼容问题

    为父容器添加`overflow:hidden`或`zoom:1`样式以触发BFC; 3. 添加额外的空标签来消除浮动影响。 #### 三、Firefox 兼容问题 1. **圆角问题**: - **问题描述**:Firefox早期版本对CSS3圆角属性`border-radius`...

    div+css兼容总结

    - **解决方法**:可以使用`clear`属性或者设置父元素的`overflow`属性来清除浮动。例如: ```css .clearfix::after { content: ""; display: table; clear: both; } .clearfix { overflow: auto; } ``` ...

    DIV+CSS相对IE6、IE7和IE8的兼容问题[借鉴].pdf

    可以使用`clearfix`类,或者在父元素上使用`overflow:hidden`或`clear:both`来实现。 以上是针对IE6、7和8的常见CSS兼容性问题及解决方案。在进行跨浏览器开发时,理解这些差异并采取适当的解决措施,能够确保网页...

    最全的CSS浏览器兼容问题.

    1. **使用clear属性**:通过在元素后面添加一个空元素,并设置`clear: both`来清除浮动的影响。 ```css .clear { clear: both; } ``` 2. **使用overflow属性**:在父元素上设置`overflow: hidden`,可以强制...

    前端部分常见知识点

    - 方法一:在浮动元素之后的元素上设置`clear: both;`属性。 - 方法二:触发BFC(Block Formatting Context,块级格式化上下文)——可以通过设置`overflow: hidden;`和`zoom: 1;`实现。 - 方法三:在容器元素上...

    css+div浏览器兼容技巧

    - 为解决IE浏览器中浮动元素出现的双倍距离问题,可以使用`display:inline`让浮动元素恢复正常间距。例如,`#box{float:left;margin:0 0 0 100px;display:inline;}` 4. **宽度和高度问题** - IE不支持`min-width`...

Global site tag (gtag.js) - Google Analytics