详解浮动元素引起的问题和解决办法

建站知识 2021-07-03 07:55www.168986.cn长沙网站建设

一、问题

多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成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>

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

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

上一篇：CSS3动画和HTML5新特性详解下一篇：CSS 实现内容高度不够的时候底部(footer)自动贴底

详解浮动元素引起的问题和解决办法

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

详解浮动元素引起的问题和解决办法

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设