什么是浮动?

  添加了浮动的的元素会脱离正常的文档流。

浮动的特点:

  1、可以让块级元素排在同一排

  2、可以让行属性标签支持所有的css样式

  3、遇到相邻的浮动元素或者父级元素会停下来

  4、浮动会影响其他元素的布局

清除浮动的办法:

  1、给父级添加高度,扩展性比较差,特殊情况下不能使用

  2、overflow:hidden (子元素比父元素大的时候不能使用)

  3、clear:both 最完美的方式

:clear:after{
content:'';
display:block;
clear:both;
}

css样式之浮动的更多相关文章

  1. css样式float造成的浮动“塌陷”问题的解决办法

    什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论 ...

  2. 一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页DIV+CSS(页面布局)(重点) 浮动/更改显示方式

    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...

  3. bootstrap-全局css样式

    bootstrap-全局css样式   1.bootstrap是一个前端框架 2.基本模板:viewport视口可以解决移动端设备网页自适应问题 3.版心(.container)  流式版心(.con ...

  4. CSS样式表(三)

    前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对 ...

  5. 记一次项目中的css样式复用

    本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e9 ...

  6. CSS样式----图文详解(二):css属性

    主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...

  7. CSS样式----图文详解:css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  8. HTML 学习笔记 CSS样式(定位)

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  9. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

随机推荐

  1. OPENCV中Line2D对象的意义

    这个对象有四个属性值 VY/VX就是直线的斜率,这俩值代表着直线的归一化向量 X,Y就是直线上的任意一点 直线方程计算如下:

  2. 【SimuPy】Python实现的Simulink 文档翻译全部完毕

    作者:CycleUser 前情回顾: 前些天在和@iGuo.@白小鱼以及@12334在关于如何看待哈工大.哈工程受美商务部「实体名单」影响,被禁止使用 MATLAB 商业软件?的问题中讨论到了 sim ...

  3. CF Round #687 Div2 简要题解

    题面 A 可以发现,最远的几个人一定是 \((1, 1), (1, m), (n, 1), (n, m)\) 中的一个,直接计算即可. B 注意到颜色数量很少,直接暴力枚举最终的颜色后模拟即可. C ...

  4. js instanceof 解析

    js中的instanceof运算符 概述 instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上 语法 obj instanceofOb ...

  5. Java进制的转换

    进制:进制是一种记数方式 ,可以用有限的数字符号代表所有的数值.由特定的数值组成. 整型的表现形式 十进制: 都是以0-9这九个数字组成,不能以0开头. 二进制: 由0和1两个数字组成. 八进制: 由 ...

  6. Block基本概念

    1.什么是Block Block是iOS中一种比较特殊的数据类型 Block是苹果官方特别推荐使用的数据类型, 应用场景比较广泛 动画 多线程 集合遍历 网络请求回调 Block的作用 用来保存某一段 ...

  7. 乐动ld06激光雷达sdk改bug记录分享

    前言: 工作中,有使用过乐动ld06款激光雷达,此款雷达将常规雷达的转动的电机部分内置于自己的保护罩内,减少了雷达本身转动积灰等其他外界影响,探测半径是12m,是一款不错的雷达. 不过今天的主要内容不 ...

  8. 宝塔面板部署springboot项目并使用域名访问

    环境准备:服务器搭建宝塔linux面板项目: springboot项目项目打包方式jar包 环境: 一.服务器,一个域名,然后再服务器上(DNS服务)将域名解析好.把安全组设置好. 二.用宝塔快速搭建 ...

  9. Solution -「BZOJ 3812」主旋律

    \(\mathcal{Description}\)   Link.   给定含 \(n\) 个点 \(m\) 条边的简单有向图 \(G=(V,E)\),求 \(H=(V,E'\subseteq E)\ ...

  10. 我们一起来学Shell - shell的条件判断

    文章目录 Shell 条件测试语法 符号说明 Shell 测试表达式 文件测试表达式 字符串测试表达式 整数操作符 逻辑操作符 测试表达式的区别总结 Shell 条件判断之if语句 单分支 IF 条件 ...