详细解读css中的浮动以及清除浮动的方法
对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家。 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮动(本文将涉及到多种清除浮动的方法) 博客正文: 1. css块级元素讲解 常见的块级元素主要有以下几种:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 、 <dir> 、 <hr>。 css中块级元素的特点:块级元素可以设置宽高,如果不设置的话,默认为父容器的宽高;总是在新行上开始并且独占一行;高度,行高以及外边距和内边距都可控制;可以容纳内联元素和其他块元素; 2.css中浮动是如何产生的 在网页布局中为了布局更美观,布局更方便,于是我们不可避免的要使用元素浮动,在css中我们使用float来设置浮动。下面我们来详细讲解浮动: 请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: 再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。 如果把所有三个框都向左移动,那么框 1