float温习(1)

温习float属性,但是可以用flex的话,就不怎么使用float,但是float仍然使用频繁

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
  padding :0;
  margin :0;
}
#ul{
  width: 200px;
  height: 150px;
  list-style: none;
  background-color: #6f6;
  float: left;
  /*display: none;*/
}
#ul>li{
  background-color: green;
  border-bottom: 1px solid #888;
}
#div{
  width: 300px;
  height: 150px;
  background-color: #967;
  float: left;
}
#div.second{
  display: flex;
  justify-content: space-around;
}
  #div.second>a{
  align-items: center;
  flex-direction: column;
  background-color: hotpink;
}
</style>
</head>
<body>
<ul id="ul">
  <li>测试</li>
  <li>测试</li>
  <li>测试</li>
  <li>测试</li>
</ul>
<div id="div">
  <div class="second">
    <a href="">测试a标签</a>
    <a href="">测试a标签</a>
    <a href="">测试a标签</a>
  </div>
  <div class="second">
    <a href="">测试a标签</a>
    <a href="">测试a标签</a>
    <a href="">测试a标签</a>
  </div>
  <div class="second">
    <a href="">测试a标签</a>
    <a href="">测试a标签</a>
    <a href="">测试a标签</a>
  </div>
</div>
<p style="width: 100px;height:100px;border:1px solid #000;float: right;">111</p>
<p style="width: 100px;height:100px;border:1px solid #000;float: right;">222</p>
<p style="width: 100px;height:100px;border:1px solid #000;float: left;">333</p>
<p style="width: 100px;height:100px;border:1px solid #000;">这个未浮动,仍在文档流里面,被浮动的元素覆盖,但是浮动有一个特点,文字会尽量显现,不被遮盖</p>
</body>
</html>

float设计的初衷是为了让文字环绕,但是float会造成父元素塌陷的现象,滥用浮动和定位会造成让你崩溃的效果,所以慎用

对于浮动造成的父元素塌陷解决方法有以下几种

最优如下:

  .clearfix:after
        {
            content: ‘‘;
            display: table;
            clear: both;
        }

        .clearfix
        {
            *zoom: 1;
        }

ie7及其以下的浮动有让人泪崩的效果,由于未曾做到兼容到那么久远,而且研究不够深刻,所以待以后再来补充。

时间: 2024-10-01 14:02:01

float温习(1)的相关文章

PHP基础温习之echo print printf sprintf print_r var_dump的用法与区别

原文:PHP基础温习之echo print printf sprintf print_r var_dump的用法与区别 一.echoecho() 实际上不是一个函数,是php语句,因此您无需对其使用括号.不过,如果您希望向 echo() 传递一个以上的参数,那么使用括号会发生解析错误.而且echo是返回void的,并不返回值,所以不能使用它来赋值.例子: 复制代码代码如下: <?php $a = echo("55nav"); // 错误!不能用来赋值 echo "55n

再温习JAVA命名规范

Java编程规范整理 基本命名规范 包命名 包名按照域名的范围从大到小逐步列出,恰好和Internet上的域名命名规则相反. 由一组以"."连接的标识符构成,通常第一个标识符为符合网络域名的两个或者三个英文小写字母. PeopleTestPageXMLExample 类,接口命名 类的名字必须由大写字母开头而单词中的其他字母均为小写:如果类名称由多个单词组成,则每个单词的首字母均应为大写例如TestPage:如果类名称中包含单词缩写,则这个所写词的每个字母均应大写,如:XMLExamp

C#SpinWait和volatile一点温习

今天看ConcurrentQueue<T> 源码发现里面居然没有用到lock,我记得ConcurrentDictionary里面是有lock的,lock的是字典里面每一个key,但是ConcurrentQueue<T> 的线程安全确是用SpinWait对象和volatile关键字来实现,于是乎就温习了一下,直接上code class Test { /* volatile多用于多线程的环境,当一个变量定义为volatile时,读取这个变量的值时候每次都是从momery里面读取而不是从

byte数组转float实现与byte转换其它类型时进行&amp;运算原理

下面是将byte数组转换为float的实现 public static float getFloat(byte[] b) { int accum = 0; accum = accum|(b[0] & 0xff) << 0; accum = accum|(b[1] & 0xff) << 8; accum = accum|(b[2] & 0xff) << 16; accum = accum|(b[3] & 0xff) << 24;

byte数组转float 以及byte转其他类型时为什么要&amp;0xff

static final char[] HEX_CHARS = "0123456789abcdef".toCharArray(); //转换为十六进制 public static String toHexString(byte[] b ) { StringBuilder sb = new StringBuilder(b.length << 2); for (byte x : b) { //byte只有8位 int 则是32位 x& oxff之后会转换为int类型 i

float类型如何转换为string类型

在一些很大的float类型的地方会用科学记数法表示,这个时候如果想完整记录下来,还是得转字符串,这里书写一个float类型转string类型的方法 <?php function float_to_string($float=0) { if(stripos($float, "e")!==false) { $tmp = explode("e",strtolower($float)); $float=bcmul($tmp[0], bcpow(10, $tmp[1])

CSS学习之float解析

转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.下面解释下这个定义中的几个名词的概念: 文档流:在html中文档流即为元素从上至下排列的顺序. 脱离文档流:元素从正常的排列顺序被抽离. 最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding). 二.float

Java中的简单浮点数类型float和double不能够进行精确运算

在java中,简单的浮点类型float和double是不能够进行运算.我们先看下面的两个程序代码: 代码一: import java.util.Scanner; class Circle { double radius; static final double PI=3.14; public Circle(){this.radius=0;} public Circle(double r){this.radius=r;} public double getArea(){return PI*this

CSS px, em, 和rem; float以及clear(第一篇学习)

px:相对长度,相对于屏幕分辨率: em:相对长度单位,相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.  任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em