DIV+CSS浮动和定位

浮动

DIV的浮动是指float属性，起初只用于图文排列，但是现在已成为网页上创建多列并排布局的常用工具之一。
下面看几个简单的例子
图文排列

    <h1>浮动：图文排列</h1><img src="./img/01.png" alt=""><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium reprehenderit explicabo veritatis commodi, facilis quia quis! Laboriosam quod officia sapiente dolorem officiis vero amet explicabo accusantium reiciendis et nisi rem, fuga voluptateducimus blanditiis aliquid! Vero perferendis dolores, exercitationem, harum temporibus modi iusto voluptas quo distinctio dolorem ratione voluptatum veritatis corporis iste officia vitae odit accusamus provident obcaecati facere, similique veniamin deleniti? Esse illo labore veritatis iste quo illum, laudantium animi ullam accusantium! Ab voluptatem, fuga at minima repellat itaque! Quia omnis similique consequatur at ipsa officia id architecto, aut, tempora dolor accusamus odio laborumsint doloribus iure magni!</p>

body {width: 90%;max-width: 900px;margin: 0 auto;
}p {line-height: 2;word-spacing: 0.1rem;
}

浮动前

使用float对img浮动后

img {float: left;margin-right: 30px;
}

浮动元素会是元素脱离正常的文档布局，并且吸附到期父元素的相应浮动位置。
首字下沉

<p>This is my very important paragraph.I am a distinguished gentleman of such renown that my paragraphneeds to be styled in a manner befitting my majesty. Bow before
my splendour, dear students, and go forth and learn CSS!</p>

p {width: 400px;margin: 0 auto;
}p::first-line {text-transform: uppercase;
}p::first-letter {font-size: 3em;border: 1px solid black;background: red;float: left;padding: 2px;margin-right: 4px;

多列浮动

<h1>2 column layout example</h1>
<div><h2>First column</h2><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
</div><div><h2>Second column</h2><p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

body {width: 90%;max-width: 900px;margin: 0 auto;
}
div:nth-of-type(1) {width: 48%;
}
div:nth-of-type(2) {width: 48%;
}
div:nth-of-type(1) {width: 48%;float: left;
}
div:nth-of-type(2) {width: 48%;float: right;
}

当然浮动并不是万能的，也会带来相应的后果，那就是会带来父元素的高度坍塌以及整个宽度可能难以计算。

我们可以运用到float的一个元素属性：clear，来清除浮动
clear可以取三个值：

left：停止任何活动的左浮动
right：停止任何活动的右浮动
both：停止任何活动的左右浮动
可以利用CSS代码中的box-sizing: border-box;改变盒模型来解决宽度的难以计算，也可以利用margin-top来解决这个问题。

定位

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
定位position有四个值：
自动定位：static
相对定位：relative
绝对定位：absolute
固定定位：fixed
定位是通过top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置
在CSS中添加申明即可

top: 30px;
left: 30px;

使用定位的前提条件是要使用的元素的某个祖先元素有定位值。

DIV+CSS浮动和定位相关推荐

CSS浮动、定位及显示隐藏元素
一.CSS浮动 1.标准流(普通流/文档流:即标签按规定默认排列方式) 块级元素独占一行,从上到下排列. 行内元素会按顺序,从左至右排列,碰到父级元素边缘则自动转行. 2.为什么浮动? (1)多个块级 ...
CSS浮动、定位总结
一.CSS 浮动 1. CSS 浮动属性简介 CSS float 属性是一个定位属性,用于使元素脱离正常的文档流,并浮动在它的父容器的左侧或右侧 float 设置元素在水平方向浮动,意味着元素只能 ...
前端学习（2846）：css浮动和定位布局
<< 我们一起来做秒杀 >>一.css浮动 float none left rightclearnone both left right二.css定位#div_test{pos ...
CSS浮动与定位逆战班
1.浮动(float): 属性值: left right float 是元素脱离文档流(文档流另有详解)后,方便进行布局, 想左右排列的元素,例如:li设置浮动后,使其由垂直排列变成水平排列此时,由 ...
css 浮动解决,div+css浮动的解决方法
如何清楚浮动(一) 已知一个大的div容器,这个容器包含了两个子div容器,然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器),清楚浮动的div容器设置css样式为c ...
DIV+CSS浮动布局
DIV+CSS布局 - 浮动布局首先呢,div可以理解为一个简单的容器.盒子.就是可以往里面填充内容的东西咱们先看一下原本的,没有使用过浮动的html页面样子: 1.浮动全部靠拢 float:le ...
前端学习记录(三) CSS浮动、定位与居中
目录浮动清除浮动方法1: 清除浮动方法2: CSS定位 relative定位 absolute定位 fixed定位居中水平居中垂直居中水平垂直居中浮动现在我们想在页面中 ...
CSS的浮动与定位手把手教学
目录前言一,浮动 1.1 传统网页布局的三种方式 1.2 初步了解浮动 1.3 浮动float 1.4 浮动特性(重难点) 1.4.1 性质1: 脱标,不占位 1.4.3 性质2: 浮动元素之间的 ...
CSS基础学习——定位
目录 1. 定位 1.1 为什么需要定位 1.2 定位组成 1.2.1 定位模式 1.2.2 边偏移 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定 ...

DIV+CSS浮动和定位

浮动

定位

DIV+CSS浮动和定位相关推荐

最新文章

热门文章