三种方法消除浮动带来的影响

来源：互联网发布：即时通讯软件怎么开发编辑：程序博客网时间：2024/06/06 11:40
<!DOCTYPE html><html><head><title></title><style type="text/css">.container{border:1px solid red;/*overflow: hidden;*//*所以，这是消除浮动的第二种方法给包含浮动元素的父标签添加css属性overflow:auto;下面我们来回顾下overflow这个属性：overflow这个属性规定内容溢出元素框时发生的事情scroll：内容会被修剪，但浏览器会显示滚动条来查看其余内容visible：默认值，内容不会修剪，会呈现在元素框之外hidden：内容会被修剪，其余内容不可见auto：如果内容被修剪，则浏览器会显示滚动条来查看inherit：规定从父元素继承overflow属性的值缺点：overflow如果不设置为默认值visible会带来对布局等等很多副作用。。（- 没有深入了解 */}img{width:100px;height: 100px;float: left;}p{float: left;}.clear{clear: both;}.clearfix:after{content:"."; /*内容就是一个英文.*/display:block; /*加入的这个元素转化为块级元素*/clear: both; /*清除左右两边的浮动*/visibility: hidden;/*设置为隐藏*/line-height: 0; /*行高0*/height: 0; /**/font-size: 0; /**/ } /* 在这里我们回顾下伪类： :after 选择器在被选元素的内容后面插入内容 :before 选择器在备选元素的前面插入内容 p:after{content:"liuyixiang";background-color:yellow; }在每个p元素后面插入内容，并设置插入内容的样式这里是在p元素后面加了liuyixiang 背景颜色红色  */ }.clearfix{*zoom:1;} /*兼容ie6/7*/.clearfix{display: inline-block;}/*兼容ie/mac*//*所以，消除浮动的第三种方式after伪元素实现父元素上使用after伪元素来新加一个内容：after伪元素内容是一个点，本身用来清楚浮动其它代码则是为了让这个伪元素不可见这个方法还是比较常见的 */</style></head><body><div class="container clearfix"><img src="a.jpg"  /><p>one</p><!--<div class="clear"></div>--><!--所以清除浮动的第一种方法就是使用空标签清楚浮动在所有浮动标签后面添加一个空标签并定义css属性clear：both;缺点：增加了无语义标签--></div></body></html>
阅读全文
0 0