[转]CSS clear both清除浮动
DIV+CSS clear both清除产生浮动
我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现。
接下来我们来认识与学习css clear知识与用法。
- clear清除浮动目录
一、clear语法与结构 - TOP
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常用地方 - TOP
我们常常用于使用了float css样式后产生浮动,最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动,大对象背景或边框不能正确显示,这个时候我们就需要clear:both清除浮动。
三、css+div案例 - TOP
DIVCSS5案例说明:这里设置一个css宽度(css width)为500px;盒子,css边框(css border)为红色,css背景(css background)为黑色、css padding为10px盒子,里面包裹着2个小盒子,一个css 浮动靠右(float:right)、一个css float靠左(float:left),两者边框为白色,背景颜色为灰色,宽度为200px,css高度(css height)为150px。这样我们来观察案例效果,看浮动产生并使用clear清除浮动。
1、案例css代码:
- .divcss5{width:500px;background:#000;border:1px solid #F00;padding:10px}
- .divcss5_left,.divcss5_right{
- border:1px solid #FFF;background:#999;width:200px;height:150px
- }
- /* css注释: 这里为了截图分别,对css代码换行 */
- .divcss5_left{ float:left}/* css注释: 设置浮动靠左 */
- .divcss5_right{ float:right}/* css注释:设置浮动靠右 */
2、案例html代码片段:
- <div class="divcss5">
- <div class="divcss5_left">float left盒子</div>
- <div class="divcss5_right">float right盒子</div>
- </div>
3、案例效果截图
css div浮动产生与清除案例截图
这个时候需要clear来清除浮动,让css命名为“divcss5”盒子撑开。
4、清除浮动方法
我们在css代码中加入CSS代码:
- .clear{ clear:both}
Html代码中“.divcss5”盒子</div>结束标签前加入代码:
- <div class="clear"></div>
最终使用div css clear清除浮动后应用用法案例截图
Clear使用用法案例截图
扩展阅读:CSS清除float浮动技巧 http://www.divcss5.com/jiqiao/j406.shtml
四、DIVCSS5总结 - TOP
使用clear可以清除float产生的浮动,注意clear样式对象加入位置,如上案例对“.divcss5”清除浮动,我们就只需要在此对象div标签结束前加入即可清除内部小盒子产生浮动。而一般常用clear:both来清除浮动,其它clear:left和clear:right可以下来根据clear both案例扩展学习实践。
文章出处:http://www.divcss5.com/rumen/r424.shtml
[转]CSS clear both清除浮动的更多相关文章
- CSS clear both清除浮动总结
我们知道有时候使用了CSS float浮动,会产生CSS浮动,这个时候就需要清理浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习CSS clear知识与用法. clear清除浮动目录 ...
- CSS clear both清除浮动
.clear{clear:both;} <div class="clear"></div>
- css用clearfix清除浮动
本文从http://www.studyofnet.com/news/196.html复制. 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 关于clear与清除浮动
今天看bootstrap突然看到了 .container:after { clear: both; } 好像对clear的用法有点模糊,于是于是又研究一下用法. 上面搜资料总会搜到张鑫旭老师的相关文章 ...
- css技巧:清除浮动
1.常用方法——overflow 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容 ...
- CSS给元素清除浮动影响的方法,--最全四种方法
代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- ife任务刷题总结(一)-css reset与清除浮动
本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初 ...
- 深入理解css系列:清除浮动
如果出现div嵌套,内层元素浮动,而外层包裹的父元素div未设置高度的时候,那么会出现外层不能被撑开的情况. HTML标签代码: <div class="wrap"> ...
随机推荐
- Spring常用注解总结(2)
@Autowired "自动填装",作用是为了消除代码JAVA代码里面的getter/setter与bean属性中的property. @Autowired默认按类型匹配的方式,在 ...
- centos7安装zabbix server
1.参照下列网址方法,打开端口:80,3306,443,22,10050,10051(可能实际不需要打开这么多) https://www.cnblogs.com/lw-2019forlinuxpyth ...
- Top值
业务开发中经常会用到元素或者浏览器窗口的各种top值,最近开发组件的过程中也遇到各种问题,因此决定好好总结一下. 常见的top值 scrollTop Element.scrollTop 属性可以获取或 ...
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
ES5中,一共有9个Array方法 Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.pr ...
- leetcode7:反转整数
给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注意: 假 ...
- CAS SSO单点登录实例
1.因为是本地模拟sso环境,而sso的环境测试需要域名,所以需要虚拟几个域名出来,步骤如下: 2.进入目录C:\Windows\System32\drivers\etc 3.修改hosts文件 12 ...
- windows7 python3.4 安装scrapy
首先升级pip 虽然提示说已经升级,但是查看版本还是发现不对,随即进入C:\Python34\Lib\site-packages 查看已经存在9.0.1的版本,怎么办?将其移除,重新升级 安装lxml ...
- 移动端使用fastclick时,模拟原生浏览器对象
移动浏览器原生click事件有300ms的延时,这是浏览器为了区分到底是双击还是单击事件.(实际上有些移动浏览器不支持双击事件.PC版chrome在手机模式下,当禁止用户双击缩放页面时(即有viewp ...
- 【Selenium】【BugList7】执行driver.find_element_by_id("kw").send_keys("Selenium"),报错:selenium.common.exceptions.InvalidArgumentException: Message: Expected [object Undefined] undefined to be a string
[版本] selenium:3.11.0 firefox:59.0.3 (64 位) python:3.6.5 [代码] #coding=utf-8 from selenium import webd ...
- 转 Java并发之锁的升级
说明:本文大部分内容来自<并发编程的艺术>,再加上自己网络整理和理解 以下内容来自<java并发编程的艺术>作者:方鹏飞 魏鹏 程晓明 在多线程并发编程中synchronize ...