消除float浮动的影响

Posted cralor

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了消除float浮动的影响相关的知识,希望对你有一定的参考价值。

 

一、

在父元素中当前浮动元素下面添加一个空的div 添加clear属性

<div style="displya:none;clear: left;"></div>

 

1、clear语法:

clear : none | left|right| both

2、clear参数值说明:
none :  允许两边都可以有浮动对象
both :  不允许有浮动对象
left :  不允许左边有浮动对象
right :  不允许右边有浮动对象

3、clear解释:
该属性的值指出了不允许有浮动对象的边情况,又对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象。

4、css结构
div{clear:left}
div{clear:right}
div{clear:both}

二、div clear常用地方
我们常常用于使用了float css样式后产生浮动,最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动,大对象背景或边框不能正确显示,这个时候我们就需要clear:both清除浮动。

 

技术分享图片










以上是关于消除float浮动的影响的主要内容,如果未能解决你的问题,请参考以下文章

使用样式“clear”和“overflow”消除浮动元素对环绕行框的影响

乔丹消除浮动到浮动的论点

flex布局中同一行内对齐左右两端

webbasic之如何消除浮动影响

清除float浮动造成影响的几种解决方案

css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')