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. 添加zookeeper到服务，并设置开机启动

    一.先安装jdk jdk 路径为/usr/local/java 二.再安装zookeeper zk路径为/use/local/zookeeper 三.创建zookeeper脚本 cd /etc/rc. ...

  2. AD19如何单独设置单个焊盘与铜皮的连接方式

    我们用过Altium Designer做设计的人都知道,Altium中有个强大的规则管理器,由于功能太多这里就先不介绍,有需要可以留言,今天的主题是讲解AD19的新功能,快速给单个焊盘设置与铜皮的连接 ...

  3. git 提交大小超过100M

    #MsnDialog.ad, #MyMoveAd, #QQ_Full, #ad-SNSSplashAd, #ad6cn, #adBody07, #adLeftFloat, #adRightFloat, ...

  4. VMware15安装Centos7超详细过程

    本篇文章主要介绍了VMware安装Centos7超详细过程(图文),具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.软硬件准备 软件:推荐使用VMwear15,我用的是VMwear 15 镜像: ...

  5. 网络编程(socket).WinSocket_recvfrom出错，GetLastError()为10054

    1.在写 我的Qt598(vs2017)x64版本的 shadowsocks程序时遇到的. 具体问题情况 大概是这样:QUdpSocket(假设是sktA) connect接收函数,sktA侦听 端口 ...

  6. Mac10.14.6安装Python3

    换了台新电脑, 记录一下Python3的安装过程. 1.检查现有版本的python. 因为Mac的系统以来python2, 所以python肯定是有的, 因为依赖, 所以安装了python3, 也不可 ...

  7. K8S从入门到放弃系列-(5)kubernetes集群之kube-apiserver部署

    摘要: 1.kube-apiserver为是整个k8s集群中的数据总线和数据中心,提供了对集群的增删改查及watch等HTTP Rest接口 2.kube-apiserver是无状态的,虽然客户端如k ...

  8. laravle6.0-IOC-DI浅谈

    1.什么是IOC,DI IOC(Inversion of Control)控制反转:ioc意味着,你将自己设计好的对象交给容器来控制,而不是传统的在你的对象内部直接控制.比如: 人 操控 手机 做一些 ...

  9. Jupyter修改工作目录（Anaconda环境）

    Anaconda安装时未添加环境变量 1.打开Anaconda Prompt 输入jupyter notebook --generate-config (base) C:\Users\Sroxi> ...

  10. Linux (x86) Exploit 开发系列教程之一(典型的基于堆栈的缓冲区溢出)

    (1)漏洞代码 //vuln.c #include <stdio.h> #include <string.h> int main(int argc, char* argv[]) ...