一、问题
二、解决办法
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>
注意：一般不用这个方法，会引起父级元素排版问题。
到此这篇关于详解浮动元素引起的问题和解决办法的文章就介绍到这了,更多相关浮动元素引起问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
一、前言 在了解加密原理前，我们来看看这样一个故事。 小红和小明是情侣，一天...
问题描述 按钮样式为图标+文字，在使用flex布局写垂直居中时，iphone7手机上文字...
用什么代码实现？不允许有白色底色产生，因为手机高度不一样 设计图要标准（750...
最近在开发中遇到的需求是：微信扫描课件二维码，播放其对应的课件视频 设计流程...
大家好，我是民工哥。 一提到监控系统，大家很快就能想到 Zabbix 、 Prometheu s...
em是何物？ em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器...
首先提示，处于安全的需要JavaScript不能直接访问本地资源文件，那怎么办呢？下...
创业公司常常能给我们带来惊喜，不拘一格的工作方式，别开生面的商业模式，独树...
1. 给logo添加替代文本 这样有两个好处：屏幕阅读器能识别logo图片代表的含义，...
复制代码 代码如下: html !--混合框架的布局： 要想实现复杂的页面布局，只需在f...
