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. 【Leetcode_easy】669. Trim a Binary Search Tree

    problem 669. Trim a Binary Search Tree 参考 1. Leetcode_easy_669. Trim a Binary Search Tree; 完

  2. CentOS设置交换分区swap

    环境查看 查看未设置交换分区之前 free -h 新加一块磁盘用于交换分区/dev/sdc 格式化 mkswap /dev/sdc 设置为交换分区 swapon /dev/sdc 再次查看 设置为重启 ...

  3. iOS-收起键盘

    1 除了调用相应控件的resignFirstResponder方法外,还有另外三种办法: 2 重载UIViewController中的touchesBegin方法,然后在里面执行在[self.view ...

  4. Flutter TextField 文本输入框的基本属性及详解

    TextField 文本输入框 源码分析: const TextField({ Key key, this.controller, // 控制正在编辑文本 this.focusNode, // 获取键 ...

  5. 帝国cms 批量替换语句

    UPDATE www_92game_net_cnys_ecms_caipu SET titlepic=REPLACE(titlepic,'http://file.92game.net', '') ; ...

  6. Spring 使用单选按钮

    模型层需要提供数据选项,设置错误信息 关键代码 @NotNull(message = "请选择性别") private String gender; 控制器层需要在显示视图前,通过 ...

  7. STL源码剖析-学习笔记

    1.模板是一个公式或是蓝图,本身不是类或是函数,需进行实例化的过程.这个过程是在编译期完成的,编译器根据传递的实参,推断出形参的类型,从而实例化相应的函数 2. 后续补充-.

  8. 安卓版 WPS 使用电脑字体、安卓版 WPS 添加字体、安卓 WPS 无法显示文档真实字体(24)

    1. 前言 安卓版WPS默认只有那么几种字体,查看电脑的Office文档无法显示文档的真实字体.想要用更多的字体需要开会员,这里提供免费方案. 2. 操作步骤 1.先在手机中打开一个要查看的文档: 2 ...

  9. 使用 netkeeper 创翼电脑开 WiFi 方法(12)

    学校的宽带使用"netkeeper"联网,但是电脑依然可以开启WiFi,以下是方法: 1. Win10用户请看 2. Win7用户请看 Win7无法在"任务管理器&quo ...

  10. hdu--1232 继续通畅工程

    wa了8次,超级崩溃,险些自闭,不过倒是学到了很多,先来一段代码: #include<bits/stdc++.h> using namespace std; ]; //储存查并集 int ...