一、

在父元素中当前浮动元素下面添加一个空的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浮动的影响的更多相关文章

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

    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...

  2. 随笔之——浮动(float)的影响及其清除、、clear与overflow-hidden清除float的不同!!!

    一.浮动(float)对内联元素的影响. 1.我们都知道,内联元素(例如:span/img/input...)在正常情况下不可以对其设置宽高的,它的大小之只和它内部内容的多少有关. 我们怎样才可以对其 ...

  3. 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  4. 【CSS学习】--- float浮动属性

    一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...

  5. 盒子模型、网页自动居中、float浮动与清除、横向两列布局

    1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...

  6. DIV CSS float浮动

    一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...

  7. 给li设置float浮动属性之后,无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  8. 浅谈float浮动

    float大概是css3以前网页布局里最常用的一个属性了,经常看到一言不合就浮动的代码,就一起来深入挖掘一下这个一半天使一半魔鬼的属性吧. 本文是读张鑫旭大神慕课网float视频后的一些总结及一些拓展 ...

  9. 给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

随机推荐

  1. 转:Linux 编译安装 Mysql5.7

    http://broqiang.com/2017/04/18/Mysql-Install-5.7.18-Linux-Compile/ 原文 Linux 编译安装 Mysql5.7 Ubuntu 下快速 ...

  2. Centos下的SVN搭建

    需求: 搭建SVN实现本地开发环境,方便线上代码的更新. 步骤: 1. 安装SVN服务 yum install -y subversion 2.创建SVN代码库的目录.创建版本库 mkdir -p / ...

  3. Thunder团队第一周 - Scrum会议2

    Scrum会议2 小组名称:Thunder 项目名称:待定 Scrum Master:李传康 工作照片: 参会成员: 王航:http://www.cnblogs.com/wangh013/ 李传康(M ...

  4. C#语言使用redis

    文章:Redis总结(二)C#中如何使用redis 文章:Redis总结(三)Redis 的主从复制 文章:Redis总结(四)Redis 的持久化

  5. hexo设置permalink-避免url中出现中文

    hexo博客初始化的url是年月日+题目:year/:month/:day/:title/,这样的url不便与分享,中文会乱吗,而且一旦修改了题目(我相信大部分人的题目都是中文)就会导致之前分享的ur ...

  6. Alpha-1

    前言 失心疯病源1 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 今天完成了那些任务 10:00~13:00 OpenCV环境配置,Matlab工具包下载 15:40~17:1 ...

  7. iOS-AFNetworking与ASIHTTPRequest的区别

    一.底层实现 1.AFN的底层实现基于OC的NSURLConnection和NSURLSession  2.ASI的底层实现基于纯C语言的CFNetwork框架  3.因为NSURLConnectio ...

  8. TCP系列28—窗口管理&流控—2、延迟ACK(Delayed Acknowledgments)

    一.简介 之前的内容中我们多次提到延迟ACK(Delayed Ack),延迟ACK是在RFC1122协议中定义的,协议指出,一个TCP实现应该实现延迟ACK,但是ACK不能被过度延迟,协议给出延迟AC ...

  9. 第一部分shell编程1基础知识

    ls etc/init.d/ shell脚本的路径 ls /usr/local/apache2/ ls /usr/local/apache2/bin/apachectl 1. shell特性命令历史 ...

  10. 织梦CMS建站入门学习(二)

    织梦建站的数据库设计: 1.模型表:根据网站的需求,建立不同的数据模型,如:文章浏览,软件下载,视频观看等等. 2.栏目表:根据网站的需求,建立不同的栏目,每一个栏目选择一个数据模型. 3.内容主表: ...