什么是浮动?

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

浮动的特点:

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

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

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

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

清除浮动的办法:

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

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

  3、clear:both 最完美的方式

  1. clear:after{
  2. content:'';
  3. display:block;
  4. clear:both;
  5. }

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. 人工智能与智能系统2-> 机器人学2 | 时间与运动

    <Robotics, Vision and Control>学习到第三章,我才发现这本书是有配套视频的,第二章看的好辛苦,很多地方生硬理解了一下,现在打算把视频再好好看一看,作为补充,也会 ...

  2. 洛谷P2240 【深基12.例1】部分背包问题(经典模板)

    首先应该注意几个关键信息:装走尽多的金币.所有金币可以随意分割并且分割后金币的价值比不变; 我们可以抽象成一个买东西的场景,给你一定数目的钱,让你在这些钱内尽量在超市买更多的小零食,这就牵扯到了一个性 ...

  3. Java-方法的递归调用

    方法的递归是指在一个方法的内部调用自身的过程.递归必须要有结束条件,否则将陷入无限递归的状态,永远无法结束调用. 代码 public class Example24{ public static vo ...

  4. Linux shell脚本之 if条件判断 (转)

    IF条件判断 1.基本语法: if [ command ]; then 符合该条件执行的语句 fi 2.扩展语法: if [ command ];then 符合该条件执行的语句 elif [ comm ...

  5. Html 项目使用自定义字体文件问题

    感谢大佬:https://zhidao.baidu.com/question/652711582735059245.html 1.首先在项目过程中新建文件夹fonts将准备好的ttf字体文件复制该文件 ...

  6. JS实现new关键字的功能

    一.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 二.原始 ...

  7. Docker镜像实战(ssh、systemctl、nginx、tomcat、mysql)

    Docker镜像实战 1.构建ssh镜像 2.构建systemctl 镜像 3.构建nginx镜像 4.构建tomcat镜像 5.构建mysql镜像 1.构建ssh镜像: 创建镜像目录 mkdir / ...

  8. VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂,适合新手

    1. 概述 首因效应告诉我们: 在日常交往中,第一印象是非常重要的,好的第一印象能让我们在与人相处时事半功倍. 但也从另一面告诉我们,不能仅凭第一印象去判断一个人,有时虚假的第一印象,也有可能蒙蔽我们 ...

  9. 针对某p社游戏某整合包的研究

    软件分析 垃圾re手 最近在玩群星 创意工坊里面下载了整合包 进群下载排序文件后竟然发现要付费() 28R够吃一顿好的 马上来分析一下这个软件 这是一个四版整合包的mod安装器 其中樱花远征和新星纪元 ...

  10. Solution -「NOI.AC 省选膜你赛」array

    题目 题意简述   维护一个长度为 \(n\) 的序列 \(\{a_n\}\),并给出 \(q\) 个操作: 将下标为 \(x\) 的数修改为 \(y\). 给定 \(l,r,k\),求最大的 \(m ...