什么是浮动?

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

浮动的特点:

  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. Flutter 2.10 更新详解

    Flutter 2.10 版已正式发布!虽然⾃ 上次稳定版本发布 以来还不到两个⽉,即使在这么短的时间内,我们也已处理和关闭了 1843 个 Issue,合并了来⾃全球 155 位贡献者的 1525 ...

  2. RedHat Linux 忘记密码

    一.无法进入系统 在虚拟机开机3秒时按e 选择第二个选项带有quite的那个 进入界面后,在quite后,空格+single 进入单用户模式 然后输入passwd +账号(要修改的账号) 输入新的密码 ...

  3. 运行时异常&编译时异常

    /* 异常体系: --------| Throwable 所有错误或者异常的父类 --------------| Error(错误) --------------| Exception(异常) 异常一 ...

  4. 直播流媒体EasyDSS

    访问官方 http://www.easydss.com/ 点击试用下载 根据不同需求 选择不同版本 (我选择的右边) 下载完解压 双击 start.bat 看见如下图则成功 网页输入 http://i ...

  5. idea运行Tomcat的servlet程序时报500错误解决方法

    今天在测试使用Tomcat运行servlet小程序时,在传递参数时,出现了如上错误. 开始我以为是配置出了问题,就把项目删除了又建立了一遍,结果亦然. 经过仔细排查,发现问题,先说明问题原因:idea ...

  6. 微服务从代码到k8s部署应有尽有系列(一)

    从本篇文章开始,我们用一个系列来讲解从需求到上线.从代码到k8s部署.从日志到监控等各个方面的微服务完整实践. 实战项目地址:https://github.com/Mikaelemmmm/go-zer ...

  7. 2、网络并发编程--套接字编程、黏包问题、struct模块、制作简易报头、上传文件数据

    昨日内容回顾 面向对象复习(json序列化类) 对象.类.父类的概念 三大特性:封装 继承 多态 双下开头的方法(达到某个条件自动触发) __init__:对象实例化自动触发 __str__:对象执行 ...

  8. HTTP流量神器Goreplay核心源码详解

    摘要:Goreplay 前称是 Gor,一个简单的 TCP/HTTP 流量录制及重放的工具,主要用 Go 语言编写. 本文分享自华为云社区<流量回放工具之 goreplay 核心源码分析> ...

  9. (反射+内省机制的运用)简单模拟spring IoC容器的操作

    简单模拟spring IoC容器的操作[管理对象的创建.管理对象的依赖关系,例如属性设置] 实体类Hello package com.shan.hello; public class Hello { ...

  10. Harbor2.2.4在CentOS7.9安装、部署

    CentOS7.9基础环境配置 https://www.cnblogs.com/uncleyong/p/15471002.html 直接从网盘获取配置好的环境 修改:vim /etc/hosts 12 ...