您现在的位置是:网站首页> 编程资料编程资料

详解浮动元素引起的问题和解决办法css解决浮动导致父元素高度坍塌的几种方法CSS实现元素浮动和清除浮动的方法什么是BFC? CSS 使用伪元素清除浮动的方法CSS 同级元素浮动分析小结详解css使既有浮动又有左右margin的多个元素两端对其使用CSS居中浮动元素的方法父元素的高度为0利用伪元素:after清除浮动可解决问题元素浮动之后文字会环绕而不是重合原因示例解答float元素浮动后高度不一致导致错位的解决办方法Css浮动元素外层容器高度为0(无高度)的解决方法

2021-09-03 1022人已围观

简介 这篇文章主要介绍了详解浮动元素引起的问题和解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、问题

  • 多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0。
  • 若浮动元素后面跟非浮动元素,非浮动元素会紧随其后浮动起来。
  • 若浮动元素前面还有同级元素没有浮动则会影响页面结构。

二、解决办法

1.clear:both

在最后一个浮动元素后面添加属性为clear:both;的元素。

1
2
3
4
5

给父元素添加clear:both;属性的:after伪元素。

1
2
3
4

注意:伪元素默认是内联水平,所以借助伪元素时要设置属性display: block;。

2.overflow:auto / overflow: hidden

1
2
3
4

3.浮动父级元素

1
2
3
4

注意:一般不用这个方法,会引起父级元素排版问题。

到此这篇关于详解浮动元素引起的问题和解决办法的文章就介绍到这了,更多相关浮动元素引起问题内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

相关内容

-六神源码网