zoukankan      html  css  js  c++  java
  • 让css初学者抓狂的属性float

    挣扎了好久,始终没有决定要不要写博客,心里有几个顾虑一是我是小白,我写的文章有没有人看?二是我是小白,我写的文章假如存在诸多错误,理解的不对发表上去再去误导别人。三是写一篇文章费时费力。但是我现在想明白了,我不写技术大牛的文章,就写菜鸟的学习型文章。我写文章是为了我自己,不是为了别人。有错误正好别人提出改正。

    写文章有几个好处,一来可以理清思绪,对于我这个思维混乱的人来说是再好不过的方法了,二来可以记录学习知识,方便以后忘记了可以回来看看。三是已积累起来的文章可以让自己很有成就感。

    文章多是学习别人文章的总结和自己的个人见解,所以实际上有些认识可能是不准确的,欢迎大神们指点,也欢迎交流。

    Float属性是css必会属性之一,但是它看上去简单,却有很深的奥义。看了张鑫旭的两篇文章,对于float的理解提高了一个层次。

    http://www.zhangxinxu.com/wordpress/?p=583 CSS float浮动的深入研究、详解及拓展(一)

    http://www.zhangxinxu.com/wordpress/?p=594 CSS float浮动的深入研究、详解及拓展(二)

    以下是我对于他的文章写的个人总结和一些认识。

    再讲float属性之前,必须要知道高度的概念和display:inline-block的包裹性

    高度由两个css模型产生:

    一个是box模型(content的height+padding+margin),这个是最基础的大家应该都是知道;

    一个是line box模型(line-height,内部的最高部分决定),这个里面就很深奥,让我学习了一番。

     

    还要说一下display:inline-block的包裹性,即设置了这个属性,该元素拥有block的属性可以设置宽和高了,也用拥有了行内元素的属性,宽和高将根据内容自适应。这里强调的是他后面的属性根据内容自适应宽和高的特性。

    一般情况下一个块级元素,没有设置display:inline-block这个属性,元素也没有设置宽度的话,元素的宽应该是继承父元素的宽度,如果是行内元素,没有设置display:inline-block这个属性,它的宽度和高度是由内容自适应,但是设置高度和宽度是不管用的。

     

     

    display:inline-block结合了行内和块级元素,你不设置宽高,我就按内容自适应,你设置了我就按你设置的走。

    那么下面我们来说浮动(float)

    一、浮动的本质是用来文字环绕的,像分栏布局和列表排列都可用其它属性实现。

    二、浮动是一个带有方位的display:inline-block;所以设置浮动,就会有默认的display:inline-block;这个属性。不需要再写display了;设置display:inline-block带来的各种效果,比如高宽自适应而不是继承父元素宽。可以设置高和宽。他的前后不会像块级元素默认换行(但是它没有高度)。

    三、浮动会破坏inline-box,产生两个结果。①(无inlinebox->无line-box->无高度)。②图片与文字无法同行显示。这两个结果恰恰是文字环绕的所必需的。

    实践与解释

     

    文字多了,你看就是所谓的环绕效果吧

    Float:left|right;与position:absolute;的一些区别

    Float:left|right;属性与position:absolute属性都具有包裹性,两者都会使元素脱离文档流,但是,与absolute不同的是:float 的元素还会在文档流上占据一个位置。position:absolute的元素是根据最近的非static的父元素定位,如果没有,则根据最初的包含块定义(一般是body),关于float,也会脱离文档流,会被放置在其容器的左边或右边。



    关于下列问题

    1关于li标签水平排列等一系列float应用及原理

    2浮动会破坏自己,影响别人

    ①   浮动产生bug的原因

    ②   清楚浮动的方法与本质

    3浮动布局的替代效果

    还没有具体学习等学习之后再好好总结。

  • 相关阅读:
    1.Spring Framework 5.0 入门篇
    Spring,Spring MVC,Spring Boot 三者比较
    函数式编程:函数作为变量和函数的计算结果
    函数式编程:面向可复用的map和pipeline机制的编程语言
    异常处理的本质
    Error handling in Swift does not involve stack unwinding. What does it mean?
    函数式编程介绍
    pure funtion
    函数式编程与命令式编程
    命令式编程是面向计算机硬件的抽象
  • 原文地址:https://www.cnblogs.com/wufangfang/p/5175940.html
Copyright © 2011-2022 走看看