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

一、问题

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

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

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

转载于:https://www.cnblogs.com/mazey/p/8629256.html

浮动元素引起的问题和解决办法相关推荐

定义了浮动元素后margin-bottom失效的解决办法
2019独角兽企业重金招聘Python工程师标准>>> 虽然IE6慢慢的退出市场了,但是还是有必要了解一些兼容问题,让自己的知识有一个更好的沉淀.margin-bottom的bug是 ...
css浮动后页面乱了怎样解决,详解浮动元素引起的问题和解决办法
一.问题多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0. 若浮动元素后面跟非浮动元素,非浮动元素会紧随其后浮动起来. 若浮动元素前面还有同级元素没有浮动则会影响页面结构. 二.解决办法 ...
css出现的问题以及解决,div+css的浮动常出现的问题以及解决办法_html/css_WEB-ITnose...
今天终于有空写篇文章了,如果有不对的还请大家多多指正,只是想让初学者少走点弯路,当初我学的时候到处碰壁,一些很简单的问题如题"div+css的浮动"被一些牛X人物写的多么的深奥,我 ...
微信公众号群发功能的页面元素加载不全的解决办法
解决了一个困扰我一晚上的问题昨天晚上突然发现,公众号的群发页面加载出现了点问题,好多内容都不显示.元素深查了一下,发现后台爆了一大堆的错误,主要就是各种元素因为"Refused to lo ...
css flex 图片不拉伸_flex布局下img元素被拉伸变形的有效解决办法
在flex布局下图片被拉伸: 正常的效果: 一.给img元素设置flex-shrink: 0 给 img 设置 flex-shrink: 0; 这种方式不会破坏现有的目录结构,只需要给被拉伸的img添 ...
inline-block元素4px空白间隙的解决办法
为什么80%的码农都做不了架构师?>>> http://www.hujuntao.com/archives/inline-block-elements-the-4px-blan ...
元素定位不到的常见情况和解决办法
经过一个月的面试准备和面试,正式进入软件测试工作,实际工作中和学习差距真的很大,不仅之前学习的很多东西忘了,而且工作中会面临很多学习中没接触的问题,解决办法,多问前辈元素定位不到的解决办法 1.Fr ...
IE6兼容性问题及解决办法汇总
1.IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...
ie6 7 8下的一些bug和解决办法
1:li边距"无故"增加任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑 ...
浮动元素会引起的问题和你的解决办法
问题: (1)父元素的高度无法被撑开,影响与父元素同级的元素 (2)与浮动元素同级的非浮动元素会跟随其后 (3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构解决方法: ...

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

一、问题

二、解决办法

1.clear:both

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

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

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

2.overflow:auto / overflow: hidden

3.浮动父级元素

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

浮动元素引起的问题和解决办法相关推荐

最新文章

热门文章

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

一、问题

二、解决办法

1.clear:both

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

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

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

2.overflow:auto / overflow: hidden

3.浮动父级元素

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

浮动元素引起的问题和解决办法相关推荐

最新文章

热门文章

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

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

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