清除浮动1-使用:after 伪元素

<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Author" content="胡超"> <title>super胡</title> <style> .news { background-color: gray; border: solid 1px black; }.ne…

.clearfix{ *zoom:1; } .clearfix:after{ content: ""; display: block; clear: both; } 在样式中加入上面一段. zoom after伪类: 元素内部末尾添加内容: :after{content"添加的内容";} IE6,7下不兼容 zoom 缩放 a.触发 IE下 haslayout,使元素根据自身内容计算宽高. b.FF 不支持:…

解决float浮动带来的父元素高度没有的问题---清除浮动

float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是要求固定的宽度,宽度计算错误就会带来整个布局的错乱. float属性出现的初衷是为了让文字环绕图片实现图文混排的效果和应用于流体布局,所以float浮动带来的父元素高度没有的问题并不是我们说的是一个 BUG,这本身就是float的特性. 以下是解决float浮动带来的父元素高度没有的问题测试为I…

3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素

CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中静态定位的元素不会受到top,bottom,left,right影响 Fixed定位: 元素的位置相对于浏览器窗口固定即便串口滚动元素也不滚动注: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持 Fixed定位使元素的位置与文档流无关,因此不占据空间 Fixed定位的元素和其他元素重叠. p.pos_fixed { positi…

CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了

浮动基本介绍在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多个元素排在同一行,并且可以设置宽高度. 其实浮动是通过float属性来实现的. float属性值说明表: 属性值描述 left 设置元素向左浮动. right 设置元素向右浮动. 右浮动实践让我们进入右浮动的实践,实践内容如:将class属性值为.box1元素设置为右浮动. 在进入有浮动实践之前…

::after::before清除浮动原理

先来看一段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ float:left; width:200px; height:200px; background-color:#ccc; } span{ display:block; c…

CSS 清除浮动的四种方法

在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字环绕的效果.如果不清除浮动,会导致父元素的高度撑不开等一系列问题. 那如何清除浮动呢?给出以下几种方法,一些不常用的就不说明了. 1.对浮动元素的父容器添加after伪类,并给伪类设置clear属性(给浮动元素的周围元素添加clear属性,清除该浮动元素)在浮动元素的后面增加一个块元素,对块元素设置…