CSS浮动特性
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浮动特性的更多相关文章
- CSS浮动特性总结
1.假设现在CSS中没有浮动(float)属性,那么会变成一个什么样子.我们会发现,目前流行采用浮动方法实现的无论是分栏布局,还是列表排列我们都可以用其他一些CSS属性(不考虑table)代替实现,唯 ...
- css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- Css - 浮动布局
Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...
- CSS 浮动和清除
CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...
- css浮动(float)及如何清除浮动
前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...
- [CSS]CSS浮动塌陷及解决办法
一. CSS浮动 先看一个例子 <html !DOCTYPE> <head> <title>HTML2</title> <style> .d ...
- css浮动现象及清除浮动的方法
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕 再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...
- 18 12 28 css 浮动 定位
浮动 浮动特性 1.浮动元素有左浮动(float:left)和右浮动(float:right)两种 2.浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 3.相邻浮动的块元素可以并在一行, ...
随机推荐
- migrate设置
migrate配置 进入项目manage所在的目录中执行如下命令,否则会报错:no such table: django_session 进入cmd 输入盘符比如:E: 切换目录 cd E:\prog ...
- 如何实现批量截取整个网页完整长截图,批量将网页保存成图片web2pic/webshot/screencapture/html2picture
如何实现批量截取整个网页完整长截图,批量将网页保存成图片web2pic/webshot/screencapture [困扰?疑问?]: 您是否正受到:如何将网页保存为图片的困扰?网页很高很长截图截不全 ...
- 【miscellaneous】理解Gstreamer架构
本文给出了Gstreamer的总体设计.通过阅读本文可以了解Gstreamer的内部工作原理.本文编译自gstreamer源码中的文档,原文在源码中的位置是/gstreamer/docs/design ...
- windows服务器入门 使用FileZilla搭建FTP服务
下载FileZilla Server(注意:我搭建ftp的时候,有一个fz的版本会报错,百度了老半天都没有解决这个问题,回来我换了一个版本就可以.如果你们也出现了不知道怎么搞定的问题的话 可以考虑 ...
- dubbo40道面试题
1.Dubbo是什么? Dubbo是阿里巴巴开源的基于 Java 的高性能 RPC 分布式服务框架,现已成为 Apache 基金会孵化项目. 面试官问你如果这个都不清楚,那下面的就没必要问了.官网:h ...
- Machine Learning Stanford Univerisity (Week 1)
1. 机器学习是什么? "A computer program is said to learn from experience E with respect to some class o ...
- oracle导入.dmp脚本
一.更改数据库管理员sys/system密码 1.运行到C盘根目录 2.输入:SET ORACLE_SID = 你的SID名称 3.输入:sqlplus /nolog 4.输入:connect /as ...
- Python_OpenCV视频截取并保存
在图像处理之前,我们需要对拿到手的数据进行筛选,对于视频,我们需要从中截取我们需要的一段或几段 整体思路比较简单,通过设定截取视频的起止时间(帧数),可以将该时间段内的图像保存为新的视频 直接上代码: ...
- gmpy安装使用方法
gmpy是一种C编码的Python扩展模块,提供对GMP(或MPIR)多精度算术库的访问.gmpy 1.17是1.x系列的最终版本,没有进一步的更新计划.所有进一步的开发都在2.x系列(也称为gmpy ...
- 应用人员反馈报错,ORA-03137: TTC protocol internal error : [12333]
一.报错现象 应用人员反馈连接不上数据库,连接报错. 我们使用PLSQL发现可以连接数据库,但是数据库DB Alert存在如下报错信息 DB AlertFri Oct :: Errors ): ORA ...