clear属性来取消浮动

【clear属性来取消浮动】的更多相关文章

clear属性来取消浮动

在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 例子: 没用clear的情况下 <style> .c1{ width: 500px; background-color:#000; border:1px solid #F00; pa…

CSS 清除浮动 clear 属性

CSS 清除浮动 clear 属性用于设定元素哪一侧不允许有其他浮动元素(而并非取消元素的浮动). 可能的取值如下: 取值说明 none 默认值,允许两侧都有浮动元素 left 左侧不允许有其他浮动元素 right 右侧不允许有其他浮动元素 both 两侧都不允许有其他浮动元素例子: #div2{ float: left; clear: both; } 设想这么一种情况,一个div包含的内容都设置了浮动,那么内容就脱离文档流,将导致div实际没包含任何“内容”,如下左图所示: 如何像右图那样…

clear属性

clear:规定元素的哪一侧不允许其他浮动元素. clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的.在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变.不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下默认值: none 继承性: no 版本: CSS1 JavaScript 语法:…

css之clear属性

clear属性用来设置元素左右两边是否可以存在浮动元素. 它的值包括:left,right,both,none.其中none代表左右两边可以出现浮动元素.…

CSS的clear属性

以下引用自w3school clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的.在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变.不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下. 值描述 left 在左侧不允许浮动元素. right 在右侧不允许浮动元素. both 在左右两侧均不允许…

clear 属性

clear属性:规定元素的哪一侧不允许有其他的浮动元素 Example: <html> <head> <style type="text/css"> img { float:left; clear:both; } </style> </head> <body> <img src="/i/eg_smile.gif" /> <img src="/i/eg_smile.gi…

CSS中clear属性的both、left和right浅析

前端开发中,我们知道clear属性有none.both.left和right四个值. 它们的具体含义如下: none:允许两边都可以有浮动对象: both:不允许有浮动对象; left:不允许左边有浮动对象; right:不允许右边有浮动对象. 这里主要讨论both.left和right三个值. 要用到的CSS代码如下: <style type="text/css"> .container{ margin: 30px auto; width:600px; height: 3…

CSS基础（float属性与清除浮动）

3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧浮动语法:float:left | right | none 特点: 浮动的元素不占位置,脱离了标准文档流(页面中标签的默认显示方式就是标准流) 浮动的元素可以实现元素的模式互换同方向浮动的元素会顺次排列浮动的元素顶端对齐默认情况下,子元素浮动只会在父元素的区域之内(除非你刻意用margin把子元素弄出去) 父元素浮动会把子元素一起带跑浮动前面有标准流,会漂浮到标准流的后面值得注意的是:文字不…

HMLT clear 属性

原文 : http://www.zhangxinxu.com/wordpress/2014/06/understand-css-clear-left-right-and-use/ clear 的四个值 : none , left , right , both clear : left -- 设置该属性的元素,放置的位置, 要求左侧没有设置了 float 属性的元素. clear : right -- 设置该属性的元素,放置的位置, 要求右侧没有设置了 float 属性的元素…

详解CSS中clear属性both、left、right值的含义

前几天一朋友在群里问clear:left的意思,我以为是简单的清除浮动问题,就让他百度"清除浮动",导致中间有点小误会.后来我按照他写的DEMO,发现我自己也没完全理解clear:left和clear:right的意思.特别看了下手册,和写了几个DEMO,经过群里其他人指导,总结如下,希望对其他人能有点帮助. clear的值有四个 none:允许两边都可以有浮动对象: both:不允许有浮动对象: left:不允许左边有浮动对象: right:不允许右边有浮动对象. 老实说,我没真正理…

CSS中float属性和clear属性的一些笔记

在学习CSS的最后一部分内容中,float属性和clear属性比较难以用语言描述,因此在笔记本中无法准确的记录这两个属性的用法.所以在博客园上以图文的形式记录这两种属性的特征,以备以后查阅. 首先,定义了四个div区域: <div id="div_1"> 风风风风风风风f风 </div> <div id="div_2"> 火火火火火火火火 </div> <div id="div_3">…

ES6-map数据结构，增加、删除、查找方法(set get has delete clear ) 属性：size

map数据结构: 本质上是键值对的集合,类似集合: 可以遍历,方法很多,可以跟各种数据格式转换. let json = { name:'ananiah', age:'18' } //效率低需要遍历json console.log(json.name); 声明map //声明map var map = new Map(); map.set(json,'web'); console.log(map) //Map(1) {{…} => "web"} map.set('wulala',…

css中clear属性的认识

今天在看博客园的页面布局时发现有不少空白的div只有css属性:clear:both. 然后去W3C文档里和百度补脑了一下,总结如下: 这是之前我写的一段测试代码: <div style="height: auto;"> <div id="map"></div> <div style="float: left;width: 50%"> <div id="searchResult&qu…

css的尺寸、display的属性、以及浮动和清除浮动的方法

css的尺寸width heightline-height 行高是由三部分构成,上间距文本高度下间距,且上下间距相等.所以文字居中.行高:一旦设置了行高,元素内部必须有内容.line-height:3:行高是当前数字x当前字体大小就是行高的值.Display这个属性规定元素以某种形式显示display:none:当前元素不显示,不占用当前的空间了visibility:hidden:当前元素隐藏,还占用当前的空间.display:block:当前元素以块级元素的形式显示出来,往往可以将行级元素…

CSS属性之float浮动属性

float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. float有四个属性分别是:left,right,none,inherit float:left :表示向左浮动 float:right:表示向右浮动 float:none:表示初始值 float:inherit:规定应该从父元素继承 float 属性的值可以看一下代码的演示 hmtl <body> <div…

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

为元素设置“float”样式之后,元素会脱离标准文档流,不再占据原来的空间.后续元素会向前移动,占据这个新的空间.后续的文本会围绕着浮动元素分布,形成一种环绕布局的现象. 示例代码: <!DOCTYPE html> <html> <head> <title>test page</title> <meta charset="utf-8"> <style type="text/css">…

JS:event对象下的target属性和取消冒泡事件

1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = function(){ alert(123);//123 } event对象下的target方法 :获取事件的目标,不用document.getElementById("box")即可获取目标; 但是target方法支持ie9以上的浏览器器,Chrome,ff,IE9以下的是不支持的. //W3C下…

bootstrap框架中data-toggle="tab"属性会取消a标签默认行为

这几天做公司项目用了bootstrap框架,在用导航组件的过程中,我发现在a标签里面添加data-toggle="tab"属性之后,这个a标签会失去默认行为,点击a标签的时候不会跳转,即使有href属性,但是它不管用.So,如果想要实现它导航栏的效果,又要能够让链接有效,只能去掉data-toggle="tab"属性.但是动态切换导航按钮的active属性就实现不了,但是实现了跳转,active属性还有什么用呢?就算有也看不到(小记)…

CSS清浮动处理（Clear与BFC）

在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Clear float</title> <style type="text/css"&…

利用clear清除浮动的一些问题

下面这段代码是用来清除浮动带来的高度塌陷问题 .clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden; } Question 1: 上面的代码的能够实现CSS清除浮动的问题吗? Answer: Can't. 因为clear属性只能控制元素本身与前面的浮动元素的关系.在本例中,使用:before伪元素明显位于所有子元素之前,故而clear属性不会因后面的浮动元素…

CSS浮动属性，知道原理就很简单,灵活控制块级元素在一行内显示

在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面布局过程中,浮动属性的使用频率是最高的.今天,就来带领大家一同认识这两个神奇的CSS属性. 承接文章:发挥个人的优势,踏踏实实的学习前端开发,为你传授学习心得技术等级:初级 | 适合前端开发的初学者阅读学习. 一.浮动属性: CSS技术使用float属性来实现块级元素的浮动效果. web前端/ht…

css清除浮动的方法汇总

这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ----------------------------------以下是原文什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布…

CSS学习笔记08 浮动

从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样应用display属性的inline属性可以让div与div共享一行,除了这种方法外,还有没有其他方法可以实现这种效果呢,答案是肯定的,那就是下面要介绍的CSS的浮动特性,浮动从字面意思上来看,就是浮起来,动起来,那么是谁浮起来,又是谁动起来呢?往下看,很快就会知道答案了. 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,漂浮在标准流之上.元素浮动后,虽然脱离标准流,但…

day 49-css补充(终结)[浮动和定位]

老师的笔记: 前情回顾: day49 混乱即阶梯. 1. 前情回顾 HTML HTTP和HTML 文档机构 <!Doctype html> HTML head <meta> <title> <link> icon <style> 直接写CSS样式 <link> CSS文件 <script> JS文件 body 常用标签: div span h1~h6 a p img form input text password num…

CSS初识- 选择器 &背景& 浮动& 盒子模型

# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 > 5. 熟练掌握CSS三种显示模式(inline.block.inline-block) > 6. 熟练掌握CSS背景属性 > 7. 熟练掌握CSS三大特性(层级性.继承性.优先性) > 8. 熟练掌握CSS盒子模型(border.padding.margin) > 9. 熟练掌握…

CSS-清除浮动

什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 引用W3C的例子,news容器没有包围浮动的元素. .news { background-color: gray; border: solid 1px blac…

CSS技巧（一）：清除浮动

什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动. 引用W3C的例子,news容器没有包围浮动的元素. .news { background-color: gray; border: solid 1px blac…