问题1:关于清除浮动

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		.father{

			background: #ccc;

		}

		.box1,.box2,.box3{

			float: left;

			height: 60px;

			background: red;

			margin: 15px;

		}

	</style>

</head>

<body>

	<div class="father">

		<div class="box1">box1</div>

		<div class="box2">box2</div>

		<div class="box3">box3</div>

		<p class=""></p>

		<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

	</div>

</body>

</html>

以上是浮动事故发生现场，截图如下：



和box加了margin之后

当我们在style中写个样式p{clear:both;}问题解决。

因此，以后遇到这种情况可以创建一个空的p然后加入样式clear:both解决

这就是关于清楚浮动，总计有三种方法

  • 添加子元素并且写上clear:both
  • 在父元素.father中添加overflow:hidden.
  • 使用after伪对象清除，但是此方法只适用于IE8以上的(下面的代码是方法3)
<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .father{

            background: #ccc;

        }

        .box1,.box2,.box3{

            float: left;

            height: 60px;

            background: red;

            margin: 15px;

        }

        .clear:after{

            content: "";

            width: 0;

            height: 0;

            display: block;

            visibility: hidden;

            clear: both;

        }

    </style>

</head>

<body>

    <div class="father clear">

        <div class="box1">box1</div>

        <div class="box2">box2</div>

        <div class="box3">box3</div>

        <p class=""></p>

        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

    </div>

</body>

</html>

问题2:关于脱离文档流

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	ul{

		list-style: none;

	}

	.nav>li{

		float: left;

	}

	ul a{

		display: block;

		text-decoration: none;

		width: 100px;

		height: 50px;

		text-align: center;

		line-height: 50px;

		color: white;

		background-color: #2f3e45;

	}

	.nav>li:first-child a{

		border-radius: 10px 0 0 10px;

	}

	.nav>li:last-child a{

		border-radius: 0 10px 10px 0;

	}

	.drop-down{

		position: relative;

	}

	.drop-down-content{

		position: absolute;

		padding: 0;

		display: none;

	}

	h3{

		font-size: 30px;

		clear: both;

	}

	.nav .drop-down:hover .drop-down-content{

		display: block;

	}

	.drop-down-content li:hover a{

		background-color: red;

	}

	</style>

</head>

<body>

	<ul class="nav">

		<li><a href="#">首页</a></li>

		<li class="drop-down"><a href="#">运动</a>

			<ul class="drop-down-content">

				<li><a href="#">排球</a></li>

				<li><a href="#">羽毛球</a></li>

				<li><a href="#">篮球</a></li>

			</ul>

		</li>

		<li><a href="#">什么鬼</a></li>

		<li><a href="#">是什么</a></li>

		<li><a href="#">怎么样</a></li>

	</ul>

	<h3>我是测试文字</h3>

</body>

</html>

CSS（一）清除浮动的更多相关文章

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

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  2. HTML&CSS基础-清除浮动

    HTML&CSS基础-清除浮动 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看浮动效果 1>.HTML源代码 <!DOCTYPE html> &l ...

  3. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  4. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  5. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  6. div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

  7. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

  8. CSS float清除浮动

    解决高度塌陷的问题 – 清除浮动 CSS中有个讨论较多的话题就是如何清除浮动,清除浮动其实就一个目的,就是解决高度塌陷的问题.为什么会高度塌陷?什么时候会高度塌陷?塌陷原因是:元素含有浮动属性 – 破 ...

  9. 【css】清除浮动（clearfix 和 clear）的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...

  10. 【CSS】清除浮动的五种方式

    清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...

随机推荐

  1. noip2017列队（线段树）

    维护一个方阵,支持 1.删掉一个点,剩下的点先向左看齐再向前看齐 2.询问一个位置上是哪个点 $n,m,q \leq 3 \times 10^5$ sol: 我们每行前$m-1$列维护一个线段树,最后 ...

  2. dcos的问题汇总

    . group 'docker' does not exist 需要手工创建docker组,这一步本来应该是在安装docker的时候来完成的,但是采用yum install的方式不行,需要添加一个do ...

  3. Scala总结

    Scala总结 ===概述 scala是一门以Java虚拟机(JVM)为目标运行环境并将面向对象和函数式编程的最佳特性结合在一起的静态类型编程语言. scala是纯粹的面向对象的语言.java虽然是面 ...

  4. JSP介绍（4）--- JSP Cookie 处理

    Cookie是存储在客户机的文本文件,它们保存了大量轨迹信息. JSP脚本通过request对象中的getCookies()方法来访问这些cookie,这个方法会返回一个Cookie对象的数组. 通常 ...

  5. Python-Redis的Hash操作

    Redis的hash是一个string类型的field和value的映射表,特别适合用于存储对象,每个hash可以存储40多亿键值对 hset(name, key, value):创建一个name的类 ...

  6. 用python做的windows和linx文件夹同步。解决自动同步、加快传输大量小文件的速度、更丰富的文件上传过滤设置。

    现在工具不好用,用的pycharm自动同步,但对于git拉下来的新文件不能自动上传到linux,只有自己编辑过或者手动ctrl + s的文件才会自动同步.导致为了不遗漏文件,经常需要全量上传,速度非常 ...

  7. js拼的onclick调用方法需要注意的地方 之一

    1.首先,明确一点,js方法中参数可以传递字符串,对象,number类型等,对象传递的是引用,方法中修改了,会影响到方法外面的对象. 2.下面重现项目中遇到的一个问题:(其实就是要明白通过引号来拼接字 ...

  8. python 开发微信 自定义菜单

    1.再次重复说明,下面代码只是为了简单说明接口获取方式.实际中并不推荐,尤其是业务繁重的公众号,更需要中控服务器,统一的获取accessToken. vim basic.py #name: basic ...

  9. 业务逻辑:完成客户下单后前台系统的数据处理并调用后台系统服务处理业务 webservice接口调用 有用

    思路: 页面提交表单后,在Action类中将页面提交的参数进行组装,随后通过使用Webservice技术来远程调用后台系统的业务接口服务来进行订单的保存操作 操作步骤: 在前台系统的Action类中通 ...

  10. 红米用adb连接显示unauthorized的解决办法

    网上能搜到的各种办法都试过了, 没一个可行: 1.大部份是用来解决usb不识别的,也就是adb devices不显示.但现在是有显示,只是unauthorized 2.我习惯用tcp连接,少根线,多台 ...