本文主要给大家分享浮动元素的内容，对于浮动元素的使用可能会出现多种问题，导致后面的布局混乱等等，下面我们就来看看浮动元素常见的问题及解决方法，感兴趣的朋友就继续往下看吧。

一、问题

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

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

    关于浮动元素的常见问题及解决方法就介绍到这，上述示例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多浮动元素的内容，大家可以关注其它的相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS样式书写顺序是怎样的？命名要注意什么?

  这篇文章给大家分享的是有关CSS样式书写顺序以及命名要注意哪些的内容。小编觉得挺实用的，对新手学习CSS有一定的帮助，因此分享给大家做个参考，接下来一起跟随小编看看吧。

• 用CSS怎样实现骨架屏？实现思路和方法是什么？

  用CSS怎样实现骨架屏？一些朋友可能对骨架屏不是很了解，在需要加载网络数据场景，为了提升用户体验，我们常常会看到一个转圈圈的loading动画，而骨架屏就可以实现这样的loading动画效果，而且相比loading动画，骨架屏的效果更好，实现更简单，接下来我们就来具体了解看看用CSS是怎样实现骨架屏吧。

• CSS字体样式属性常用的有什么，用法是怎样

  在这篇文章中我们来了解一下13个常用CSS字体样式属性，下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。

• CSS浮动出现高度塌陷问题有哪些处理方法呢

  一：高度塌陷问题在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起

• 在CSS3中default伪类选择器作用和用法是什么

  CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。接下来通过本文给大家介绍CSS3 :default伪类选择器使用简介，感兴趣的朋友跟随脚本之家小编一起看看吧