css中清除浮动

（1）使用空标签清除浮动

这是目前最常用的一种清除浮动的方法。空标签可以是div标签，也可以是P标签。其实理论上可以是任何标签。这种方法是在需要清除浮动的父级元素内部的最后添加一个清除浮动的空标签，其CSS代码：clear:both。此方法简洁明了，方便实用，但其弊端也很明显，就是增加了无意义的结构元素。此外，有一种与此相似的方法，<br clear="all"/>也可以实现同样的效果。

（2）使用after伪对象清除浮动

各浏览器均支持after伪对象，所以after应该是适用的，不存在兼容问题。其CSS代码：#layout:after{ display:block; clear:both; content:""; visibility:hidden; height:0;}。使用中需注意：1、该方法中必须为需要清除浮动元素的伪对象设置height:0，否则该元素会比实际高出若干像素；2、content属性是必须的，但其值可以为空。此方法实用有效，且不用添加无意义的标签，但CSS代码较复杂，不够简洁明了。

（3）使用overflow属性

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto;其目的是让高度自适应，zoom:1;是为了兼容IE6(zoom不符合W3C标准)，也可以用height:1%;的方式来解决。

时间： 2024-07-28 12:26:04

css中清除浮动的相关文章

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3

css中清除浮动的方法总结

1.父级div定义height <style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DD

css中清除浮动的方法

1.浮动后会影响别的元素,可以用clear:both来清除浮动. 例如<div class="box1"></div> <div class="box2"></div> css: .box1{ float:left;}     .box2{ clear:both ; } 2.子级浮动会导致父级高度塌陷,可以使用overflow:hidden找回高度

css中清除浮动的几种方法（自己总结）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/css"> ul{list-style:none;outline:1px solid;} ul li{padding:5px 8px;background:#ccc;f

css中的浮动以及清除浮动

对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也会去复习以前的知识,这是真正会让我们有所提高的一个过程,是所谓温故而知新.那么在学习的过程中也看了很多大神的博客,这里就来总结一下我个人对于float的理解; css的浮动使我们在布局的时候经常会用到的一个属性,在大量的使用过程中,我们可能只是一知半解的去使用,或者使用的时候得到了自己想要的结果就绝

CSS中的浮动和清除浮动，梳理一下！

CSS中的浮动和清除浮动,梳理一下! 第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧. 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline

【转】CSS中的浮动和清除浮动

以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场景.

【css】清除浮动的几种方式

[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: 1 .news { 2 background-color:gray; 3 border:1px solid black; 4 } 5 .news img { 6 float:left; 7 } 8 .news p { 9 float:right; 10 } 11 <divclass="news"> 12 <imgsrc="/img/news-pic.jgp"

CSS clear清除浮动

1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动是默认both,也就是说一开始不能有浮动的. 3.使用的案例:假设我清除第三个DIV的浮动 <style type="text/css"> div{ border:1px solid red; float:left; clear:none; } #msg_Div{ width: