详解浮动元素引起的问题和解决办法
发布时间：2020-08-28 16:25:53 作者：mazey 
我要评论
我要评论这篇文章主要介绍了详解浮动元素引起的问题和解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、问题
- 多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0。
- 若浮动元素后面跟非浮动元素，非浮动元素会紧随其后浮动起来。
- 若浮动元素前面还有同级元素没有浮动则会影响页面结构。
二、解决办法
1.clear:both
在最后一个浮动元素后面添加属性为clear:both;的元素。
<style>
div.parent>div.fl{
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
border: 1px solid red;
}
.clear{
clear: both;
}
</style>
<div class="parent">
<div class="fl">1</div>
<div class="fl">2</div>
<div class="fl">3</div>
<div class="fl">4</div>
<div class="clear">5</div>
</div>
给父元素添加clear:both;属性的:after伪元素。
<style>
div.parent>div.fl{
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
border: 1px solid red;
}
.clear:after{
content: '';
display: block;
clear: both;
}
</style>
<div class="parent clear">
<div class="fl">1</div>
<div class="fl">2</div>
<div class="fl">3</div>
<div class="fl">4</div>
</div>
注意：伪元素默认是内联水平，所以借助伪元素时要设置属性display: block;。
2.overflow:auto / overflow: hidden
<style>
div.parent{
overflow: auto;
/*overflow: hidden;也可以*/
}
div.parent>div.fl{
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
border: 1px solid red;
}
</style>
<div class="parent">
<div class="fl">1</div>
<div class="fl">2</div>
<div class="fl">3</div>
<div class="fl">4</div>
</div>
3.浮动父级元素
<style>
div.parent{
float: left;
}
div.parent>div.fl{
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
border: 1px solid red;
}
</style>
<div class="parent">
<div class="fl">1</div>
<div class="fl">2</div>
<div class="fl">3</div>
<div class="fl">4</div>
</div>
注意：一般不用这个方法，会引起父级元素排版问题。
到此这篇关于详解浮动元素引起的问题和解决办法的文章就介绍到这了,更多相关浮动元素引起问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了css解决浮动导致父元素高度坍塌的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编2020-04-02
这篇文章主要介绍了CSS实现元素浮动和清除浮动的方法,简单介绍了浮动的基本知识，通过截图代码的形式给大家介绍了css清除浮动的方法，需要的朋友可以参考下2019-12-05- 块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。这篇文章给大家介绍了CSS 使用伪元素清除浮动的方2019-07-01
这篇文章主要介绍了CSS 同级元素浮动分析小结的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-14
这篇文章主要介绍了详解css使既有浮动又有左右margin的多个元素两端对其,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-07- 这篇文章主要介绍了使用CSS居中浮动元素的方法,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-07-29
- 浮动布局会导致父元素的高度为0，在未设置高度的情况下，不会根据子元素的高度而变化，所以一定要设置clear属性，用伪元素 :after 来代替这个空白标签2014-09-01
- 既然浮动元素脱离了文档流，为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢？上网各种搜、各种问人终于找到了解决方法，感兴趣的朋友不要错过2013-12-17
- 当N个元素浮动后，会导致错位的问题。一般给元素一个固定的height就没有这个现象，下面与大家分享下当高度不一致时的解决方法2013-11-18
- 在ie8、chrome浏览器中，包裹浮动的li元素的外层ul高度为0，ie7浏览器和ie8兼容模式显示正常，下面与大家分享下多种解决方法大家可以根据情况自由选择，希望对大家有所帮助2013-07-31
最新评论