float：left/right左浮动有浮动

特点：

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>浮动</title>
  6. 		<style type="text/css">
  7. 			.main{
  8. 				width: 310px;
  9. 				margin: 0 auto;
  10. 				border: 1px solid black;
  11. 				/*overflow: hidden;*/
  12. 			}
  13. 			.first{
  14. 				width: 80px;
  15. 				height: 80px;
  16. 				margin: 10px;
  17. 				background-color: cornflowerblue;
  18. 				text-align:center;
  19. 				/*元素浮动*/
  20. 				float: left;
  22. 			}
  23. 			/*.main .last{
  24. 				clear: both;
  25. 			}*/
  26. 		</style>
  27. 	</head>
  28. 	<body>
  29. 		<div class="main">
  30. 			<div class="first">1</div>
  31. 			<div class="first">2</div>
  32. 			<div class="first">3</div>
  33. 			<div class="first">4</div>
  34. 			<div class="first">5</div>
  35. 			<div class="first">6</div>
  36. 			<div class="first">7</div>
  37. 			<div class="first">8</div>
  38. 			<!--<div class="last">
  40. 			</div>-->
  41. 		</div>
  42. 	</body>
  43. </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. iOS中处理json解析出现的null,nil的解决办法

    最开始是使用的一个函数进行处理,代码如下: - (id) setNoNull:(id)aValue{ if (aValue == nil) { aValue = @"";//为nu ...

  2. in-place数据交换

    实现in-place的数据交换 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 经典的排序问题 问题描述 一个数组中包含两个已经排好序的子数组,设计一个in- ...

  3. 最新 开创java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.开创等10家互联网公司的校招Offer,因为某些自身原因最终选择了开创.6.7月主要是做系统复习.项目复盘.LeetCode ...

  4. csu 1958: 数字游戏

    1958: 数字游戏 Submit Page   Summary   Time Limit: 2 Sec     Memory Limit: 128 Mb     Submitted: 134     ...

  5. python 使用 RabbitMQ

    一.RabbitMQ消息队列介绍 RabbitMQ是在两个独立得python程序,或其他语言交互时使用. RabbitMQ:erlang语言 开发的. Python中连接RabbitMQ的模块:pik ...

  6. 050 Android 百度地图的使用

    1.初始化地图 //初始化地图 private void initMapView() { //1.获取地图控件引用 mMapView = findViewById(R.id.bmapView); mB ...

  7. [转帖]HTTP请求方法：GET、HEAD、POST、PUT、DELETE、CONNECT、OPTIONS、TRACE 说明

    HTTP请求方法:GET.HEAD.POST.PUT.DELETE.CONNECT.OPTIONS.TRACE 说明 平时的Rest开发,用到的都是GET,POST,PUT,DELETE类型的请求. ...

  8. Word 写论文插入参考文献的正确操作

    1. 引言 一般我们写论文插入参考文献的标号都是手动输入的,这样造成的问题有以下几个: 手动输入标号比较麻烦: 如果参考文献顺序变了,需要一个一个重新更改标号数值,及其麻烦: 标号无法和末尾的参考文献 ...

  9. Vue中常用知识点demo

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  10. js时间戳与日期格式之间相互转换

    ###js时间戳与日期格式之间相互转换 将时间戳转换成日期格式 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法, ...