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. .NET Core学习笔记（2）—— WPF使用UWP Custom Control

    自.NET Core 3.0开始,某软加入了对WPF的支持.同时对XAML Islands也做了进一步加强.在.NET Core 3.0之前,我们只能在WPF程序中,通过两种方式有限制地使用Stand ...

  2. vue中的$attrs属性和inheritAttrs属性

    一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不 ...

  3. NOIp 2009：靶形数独

    题目描述 Description 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他 们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向Z 博士请教, Z ...

  4. jira使用一：如何给项目分组、sprint并行、禁止发送消息给atlassian

    问题一:如何设置多个sprint并行? 问题二: 如何分组显示 设置泳道,并快速过滤 问题3:添加所属产品? 管理员登录Jira后台设置-问题-自定义字段找到:所属产品,进入 配置 界面在配置界面中, ...

  5. ORA-12514错误分析

    ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法   ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 有同事遇到这个问题,现总结一下,原因如下: ...

  6. LC 173. Binary Search Tree Iterator

    题目描述 Implement an iterator over a binary search tree (BST). Your iterator will be initialized with t ...

  7. POJ 2299-Ultra-QuickSort-线段树的两种建树方式

    此题有两种建树方式! Description In this problem, you have to analyze a particular sorting algorithm. The algo ...

  8. Centos7.3安装jenkins

    安装jenkins         下载地址: https://jenkins.io/download/最新版本         将Jenkins上传到tomcat的webapp目录          ...

  9. 1231: 删除字符串中指定的字符（Java）

    WUSTOJ 1231: 删除字符串中指定的字符 题目 原题链接 Description 明天就要英语考试了,小明明正在挑灯夜战背单词.小明明发现单词很难背,背一个忘一个.经过仔细研究,小明明发现单词 ...

  10. MySQL explain功能展示的各种信息的解释

    1.id: MySQL Query Optimizer 选定的执行计划中查询的序列号. 2.select_type: 所使用的查询类型,主要有以下这几种查询类型.  DEPENDENT SUBQUER ...