浅谈CSS浮动属性
要介绍css的float浮动属性,就必须先了解一下标准文档流
标准文档流:
在没有css的干预下,块级元素独占一行,可以设置宽高,行内元素并排显示,宽高自动填充。
HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。
float浮动属性最开始的用法是实现让目标内容被文字包裹这种在报纸上经常见到的情况,而后来大多被用来实现内容的横向并排排列,
浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。
float的属性介绍:
left :元素向左浮动。
right :元素向右浮动。
浮动的特性:
【1】子级浮动导致父级高度塌陷,解决办法:1.给父级再次添加一个高度2.使用overflow:hidden
【2】浮动的包裹性:
块级元素:包裹到内容区域,不再占满一整行,但是还有长度,长度和内容的长度一致,并且本体依旧是块级元素;
行内元素:设置浮动后会改变display属性,使其变成块级元素,并且可以设置宽高。
【3】元素浮动不会穿过padding区域
【4】浮动会使元素脱离文档流影响别的元素。
浅谈CSS浮动属性的更多相关文章
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- 浅谈CSS模块化
为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...
- CSS浮动属性,知道原理就很简单,灵活控制块级元素在一行内显示
在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...
- css浮动属性
1.为什么需要浮动 HTML中的标签元素大致分为三类:块状元素.内联元素.内联块元素. 每种元素都有其各自的特点,其中块状元素会独占一行,而内联元素和内联块元素则会在一行内显示.如果我们想让两个甚至多 ...
- 浅谈css中浮动和清除浮动带来的影响
有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
- 浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...
- 浅谈float浮动
float大概是css3以前网页布局里最常用的一个属性了,经常看到一言不合就浮动的代码,就一起来深入挖掘一下这个一半天使一半魔鬼的属性吧. 本文是读张鑫旭大神慕课网float视频后的一些总结及一些拓展 ...
- CSS浮动属性Float介绍
#cnblogs_post_body h6 {font-size: 16px;font-weight: bold;} 什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中 ...
随机推荐
- 计算机协议、标准以及OSI模型的简单介绍
由概念启发学习,引导学习.本篇文章中包含了一些最基本的概念和底层知识.虽然零碎,但是这是基础. 一.协议和标准 协议指的是一组控制数据通信的规则.协议有三要素:语法(syntax),语义(semant ...
- 微信小程序函数调用监控
微信小程序之无埋点函数调用监控 有时候,面对一个bug,左思右想就是无法理解为什么. 我就有过这样的经历,耗时整个一个晚上,后来还是放弃了.不得不在所有可能的点都加上日志,部署等待再次报错,真的很让人 ...
- 数据库SQL语句中 查询选修了全部课程的学生的学号和姓名
一.SQL语言查询选修了全部课程的学生的学号和姓名. 两种解决途径: 第一种: 我们可以表示为在SC表中某个学生选修的课程数等于C表中课程总数.相应的SQL语言如下: select S#,SNAME ...
- 可能是迄今为止最好的GitHub代码浏览插件--赞
https://chrome.google.com/webstore/category/extensions?hl=zh-CN 搜索"insight.io" chrome://ex ...
- SpringData ES中一些底层原理的分析
之前写过一篇SpringData ES 关于字段名和索引中的列名字不一致导致的查询问题,顺便深入学习下Spring Data Elasticsearch. Spring Data Elasticsea ...
- PHP Simple HTML DOM解析器使用入门
http://www.cnphp.info/php-simple-html-dom-parser-intro.html 一直以来使用php解析html文档树都是一个难题.Simple HTML DOM ...
- Java之增强的for 循环
3. 增强for循环 1) 作用: 对存储对象的容器进行迭代 2) jdk5以前怎么迭代 3) 增强for循环迭代数组 String [] arr = {"a", "b ...
- CSS布局-圣杯布局
圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...
- 11. 将博客部署到tomcat上
springboot项目既可以以jar运行,也可以做成war包放到服务器上,因为我的博客项目涉及到文件上传,所以按照jar的方式就不可行,需要部署到tomcat上,具体做法如下:1. 修改pom.xm ...
- stack的empty()
public static void main(String[] args) { Stack stack=null; System.out.println("1."+stack.e ...