什么是浮动?

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

浮动的特点:

  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. mybatis 配置文件 简单介绍

    配置文件? 一. properties属性:可以引入外部的属性文件,可以自定义属性信息,供后续的节点使用: 注意!外部文件 定义在SRC目录下 否则找不到资源.二. settings设置:全局的配置信 ...

  2. 解读WPF中的Binding

    1.Overview 基于MVVM实现一段绑定大伙都不陌生,Binding是wpf整个体系中最核心的对象之一这里就来解读一下我花了纯两周时间有哪些秘密.这里我先提出几个问题应该是大家感兴趣的,如下: ...

  3. iOS9新特性之常见关键字

    /* nullable:1.怎么使用(语法) 2.什么时候使用(作用) nullable作用:可能为空 nullable 语法1 @property (nonatomic, strong, nulla ...

  4. 长时间不操作Navicat或Putty会断线?

    问题描述 今天发现只要一直不使用Putty,发现就会"卡住",还有Navicat连接数据库也有类似问题. 问题分析 Linux或者数据库都想节省连接资源呗. 问题解决 那就隔一段时 ...

  5. 无法加载 mcrypt (外链,英语) 扩展,请检查您的 PHP 配置。

    转载请注明来源:https://www.cnblogs.com/hookjc/ 需要安装libcrytp,在下面的地址下载libmarypt: ftp://mcrypt.hellug.gr/pub/c ...

  6. Redis sentinel.conf配置文件详解

    redis-sentinel.conf配置项说明如下: 1.port 26379 sentinel监听端口,默认是26379,可以修改. 2.sentinel monitor <master-n ...

  7. LeetCode随缘刷题之截断句子

    这道题相对比较简单.正好最近学到StringBuilder就用了. package leetcode.day_12_06; /** * 句子 是一个单词列表,列表中的单词之间用单个空格隔开,且不存在前 ...

  8. InfluxDB 2.x Open Source Time Series Database

    1. 说明 目前,大家普遍还在采用 InfluxDB 1.x 的版本,官方2.x的版本已经发布一段时间了, 其主推flux语言且自带前端炫酷图表. 2. 官方网站 https://www.influx ...

  9. VS2019配置eigen

    本文讲述如何在VS2019中配置eigen eigen版本:eigen-3.3.9 百度网盘地址:https://pan.baidu.com/s/1Bu5A58qV2n8doDs4NpPfJQ  提取 ...

  10. 为什么三层架构中业务层(service)、持久层(dao)需要使用一个接口?

    为什么三层架构中业务层(service).持久层(dao)需要使用一个接口? 如果没有接口那么我们在控制层使用业务层或业务层使用持久层时,必须要学习每个方法,若哪一天后者的方法名改变了则直接影响到前面 ...