float：left/right左浮动有浮动

特点：

①浮动不占位：浮动元素不占位置

②默认排列成一行，遇到边界自动换行

③如果有文字（没有设置浮动的元素内容）会绕着浮动元素走

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>浮动</title>

		<style type="text/css">

			.main{

				width: 310px;

				margin: 0 auto;

				border: 1px solid black;

				/*overflow: hidden;*/

			}

			.first{

				width: 80px;

				height: 80px;

				margin: 10px;

				background-color: cornflowerblue;

				text-align:center;

				/*元素浮动*/

				float: left;

			}

			/*.main .last{

				clear: both;

			}*/

		</style>

	</head>

	<body>

		<div class="main">

			<div class="first">1</div>

			<div class="first">2</div>

			<div class="first">3</div>

			<div class="first">4</div>

			<div class="first">5</div>

			<div class="first">6</div>

			<div class="first">7</div>

			<div class="first">8</div>

			<!--<div class="last">

			</div>-->

		</div>

	</body>

</html>

清除浮动的两种方式：

①在主块级元素css中设置：overflow:hidden

②在子块级后面创建一个空白的div，设置clear:both

温馨提示：后期会继续填充优化，写的不好的地方欢迎指正！

CSS浮动特性的更多相关文章

  1. CSS浮动特性总结

    1.假设现在CSS中没有浮动(float)属性,那么会变成一个什么样子.我们会发现,目前流行采用浮动方法实现的无论是分栏布局,还是列表排列我们都可以用其他一些CSS属性(不考虑table)代替实现,唯 ...

  2. css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  3. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  4. Css - 浮动布局

    Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...

  5. CSS 浮动和清除

    CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...

  6. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

  7. [CSS]CSS浮动塌陷及解决办法

    一. CSS浮动 先看一个例子 <html !DOCTYPE> <head> <title>HTML2</title> <style> .d ...

  8. css浮动现象及清除浮动的方法

    css浮动现象及清除浮动的方法   首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕   再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...

  9. 18 12 28 css 浮动 定位

    浮动 浮动特性 1.浮动元素有左浮动(float:left)和右浮动(float:right)两种 2.浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 3.相邻浮动的块元素可以并在一行, ...

随机推荐

  1. node.js写巨大的xlsx

    一般用node-xlsx写xlsx文件的话局要把数据全部放在内存里面再写到文件里,如果文件很大的话就会导致内存吃不消. 可以使用PySpreadsheet这个npm库,他支持写很大的文件. PySpr ...

  2. SQL Server 2008中的代码安全===主密钥

    在SQL Server中的加密由层次结构形式进行处理以提供多级别的安全.SQL Server包含两个用于加密数据的密钥类型.如下图: 1.服务器主密钥(Service Master Key),位于层次 ...

  3. 【Leetcode_easy】657. Robot Return to Origin

    problem 657. Robot Return to Origin 题意: solution1: class Solution { public: bool judgeCircle(string ...

  4. react中异步的使用

    let promise; promise = this.props.corporationService.preSearchPage(params); promise.then((data) => ...

  5. oracle-复制表结构和表数据

    1.复制表结构和表数据 create table table_new as select * from table_old 2.复制表结构 create table table_new as sele ...

  6. D-Link系列路由器漏洞挖掘

    参考 http://www.freebuf.com/articles/terminal/153176.html https://paper.seebug.org/429/ http://www.s3c ...

  7. 涨停复盘：5G概念持续活跃，军工股强势崛起

    午后银行股快速拉升,三大股指大幅拉升,沪指一度临近2800点,但未能持续随后沪指小幅下行,题材股表现强势,证券板块高开低走.截止收盘,沪指涨0.93%,创业板指涨1.51%. 盘面上,银行板块午后拉升 ...

  8. Qt598x64vs2017.跨线程传递std::string

    1.Qt编译的时候 提示 str::string 需要在main(...)中注册什么的(大概是这个意思,记不清了),于是 在main(...)中调用了 “qRegisterMetaType<st ...

  9. 关于远程链接 redis的坑·

    今天遇到了一个问题,在redis.conf 中 将 bind: 注释掉bind 127.0.0.1 仍然不行 其实是要把bind 127.0.0.1 改为 0.0.0.0 才行 下面附赠详细过程 查看 ...

  10. 解决Maven依赖本地仓库eclipse报错的问题

    一.应用场景 有时候项目报红色的感叹号错误也是由于项目中没有导入相关jar报导致报错 为了使用maven强大的包依赖管理和项目管理功能,故在项目中使用maven2作为项目建构工具. 但是我的项目在内网 ...