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;float:left;margin-right:8px;}
.clearfix:after{clear:both;content:‘‘;display:block;width: 0;height: 0;font-size:0;visibility:hidden;}
.box2{overflow:hidden;}
.box3{overflow:auto;}
.box4{height:31px;}
</style>
</head>
<body>
<ul class="clearfix box1">
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<ul class="box2">
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<ul class="box3">
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<ul class="box4">
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</body>
</html>

时间: 2024-08-25 07:51:59

css中清除浮动的几种方法(自己总结)的相关文章

CSS中清楚浮动的几种方法

清除浮动的几种方法 2017-02-16  19:03:17 当某元素的子元素设置浮动时,该元素就会产生塌陷,无法自适应高度.这种情况的出现严重影响了网页排版,因此我们必须要清除浮动来避免浮动溢出,父元素塌陷的发生.以下有几种清除浮动的方法: 方法和描述 代码示范 优弊 一.浮动后在结尾加一个空的标签(如:<div>.<p>等),设置属性clear:both; 这样可以让父级元素自动获得高度 <!-----HTML代码----> <div> <div

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 清除浮动的四种方法

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

css清除浮动的几种方法整理

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <style type="text/css"> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}

css清除浮动的几种方法以及对应规范说明

css清除浮动的几种方法以及对应规范说明 1.{clear:both;}设置了clear 属性的元素,其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染,使包含浮动元素的容器高度正常.所以适用于浮动元素后面容器之内有个非浮动元素,或是额外添加一个新的空元素. 2..after- clear-float :after{content:""; display:block; clear:both;}利用伪类添加新元素,原理同上,所以只适用于父容器最后一级子元素是浮动的,即

【转】浅谈 CSS 清除浮动的 6 种方法

转载:浅谈 CSS 清除浮动的 6 种方法 在开发网页的时候经常需要用到各种浮动,此时便需要及时的清除浮动,否则将会导致布局出现问题 引出问题: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black;

[Web 前端] 018 css 清除浮动的四种方法

清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both(不推荐)(见例2.2) 使用成熟的清浮动样式类 clearfix(见例3) 少废话,上例子 例 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test

【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中隐藏内容的3种方法

CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示,如代码.文字.链接.图片.div层,是推荐的内容隐藏方式. <div style="display:none;">隐藏内容</div> 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. i