消除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浮动的影响的更多相关文章
- 清除float浮动造成影响的几种解决方案
1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响” 学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...
- 随笔之——浮动(float)的影响及其清除、、clear与overflow-hidden清除float的不同!!!
一.浮动(float)对内联元素的影响. 1.我们都知道,内联元素(例如:span/img/input...)在正常情况下不可以对其设置宽高的,它的大小之只和它内部内容的多少有关. 我们怎样才可以对其 ...
- 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
- 【CSS学习】--- float浮动属性
一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...
- 盒子模型、网页自动居中、float浮动与清除、横向两列布局
1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...
- DIV CSS float浮动
一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...
- 给li设置float浮动属性之后,无法撑开外层ul的问题。
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- 浅谈float浮动
float大概是css3以前网页布局里最常用的一个属性了,经常看到一言不合就浮动的代码,就一起来深入挖掘一下这个一半天使一半魔鬼的属性吧. 本文是读张鑫旭大神慕课网float视频后的一些总结及一些拓展 ...
- 给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
随机推荐
- 20162328蔡文琛week03
学号 2006-2007-2 <程序设计与数据结构>第X周学习总结 教材学习内容总结 在第三章,我学习到了更多有关于java.util包的知识.了解了多个引用变量可以指向同一个对象.而且J ...
- oracle数据库之存储函数和过程
一.引言 ORACLE 提供可以把 PL/SQL 程序存储在数据库中,并可以在任何地方来运行它.这样就叫存储过程或函数.过程和函数统称为 PL/SQL 子程序,他们是被命名的 PL/SQL 块 ...
- 一日一句 SQL [持续更新] MySQL + Oracle
1 . group by 和 having字句: group by是根据列值对数据进行分组, having子句用于对分组的数据进行过滤. [ having 针对的对象是分好的组] eg: employ ...
- Tomcat 7优化配置
Tomcat 的优化不像其它软件那样,简简单单的修改几个参数就可以了,它的优化主要有三方面,分为系统优化,Tomcat 本身的优化,Java 虚拟机(JVM)调优.系统优化就不在介绍了,接下来就详细的 ...
- 【Python】python动态类型
在python中,省去了变量声明的过程,在引用变量时,往往一个简单的赋值语句就同时完成了,声明变量类型,变量定义和关联的过程,那么python的变量到底是怎样完成定义的呢? 动态类型 python使用 ...
- paramiko连接远程主机,上传下载文件
Paramiko是基于SSHv2协议实现的一个Python模块,提供客户端和服务器的功能.Paramiko本身是一个围绕SSH网络概念的纯Python接口. Client: # 创建一个SSH连接对象 ...
- [JLOI2014]松鼠的新家 树上差分
差分 一开始竟然想分情况讨论来差分,然后发现各自情况要分析, 就是为了解决中间节点重复计算的问题, 结果 最后一想,中间重复计算了一次,那我最后减掉不就好了么,,, 那这就是一道差分裸题了(这是唯一不 ...
- Spark2.1.0之初识Spark
随着近十年互联网的迅猛发展,越来越多的人融入了互联网——利用搜索引擎查询词条或问题:社交圈子从现实搬到了Facebook.Twitter.微信等社交平台上:女孩子们现在少了逛街,多了在各大电商平台上的 ...
- 函数strcpy的实现
strcpy函数的百科中给出了各种情况的详细说明,这里,仅给出一些注意事项: 1.strcpy的函数原型是: /* dest(destination)为目标字符串,src(source)为原字符串*/ ...
- bzoj1263: [SCOI2006]整数划分(高精度+构造)
第一次写压位高精度只好抄黄学长的 代码最后一段想了好久一看评论区才知道黄学长写错了= =很气 自己最后改对了T^T 这题最优是一直划分3出来直到<=4 #include<iostream& ...