css中居右,第八章 css实现div的居中，居左，居右

这一章的学习，可以掌握通过块级元素的配置实现网页上面的内容居中，居左，居右显示。

整个网页居中，我们可以用一个div元素做配置，配合width、margin使用，margin的属性值为auto。块级元素的居左和居右，我们可以通过配置浮动来达到效果。在学会应用浮动之前，要明白浏览器对网页进行渲染的处理方式。通常默认的是正常流动，即按照元素在网页源代码中出现的顺序显示元素。那我们还可以利用嵌套块级元素来实现嵌套布局。正常流动，那么我们可以通过对div的位置的改变，做出嵌套样式。

在如图的效果中，我们为导航栏做了左侧的浮动，并利用嵌套和浮动的综合应用，做出了双栏布局。

双栏布局时注意的有：右栏内容的margin-left的取值很重要，一定要大于左侧浮动导航的宽度。因为浮动是排除在正常流动之外的，所以我们需要清除浮动来更好的控制我们的布局。除了用clear，overflow也可以达到清除的效果。clear的属性值取决于要清除的类型，overflow的属性值取auto，并要配合width使用。

关于浮动和元素位置控制的知识点：

float：right在右侧浮动；

float：left在左侧浮动。在设置浮动的时候有几点是需要注意的：只有块级元素能够配置成浮动：我们在书中所学的div、段落，图片、块引用元素。图片设置浮动的时候，已经有了一个隐含的宽度，否则我们要为其他的浮动元素指定宽度。

除了正常流动的处理方式外，我们还可以利用对元素位置的更多控制来进行页面布局。例如相对定位、绝对定位、浮动。

相对定位(relative)和绝对定位(absolute)是position属性的两个属性值，连同left，right，top，bottom等属性使用，即可实现定位。相对定位用于小幅修改某个元素的位置，绝对定位用于元素在其容器元素中的确切位置。相对定位和绝对定位都是相对于网页的上下左右来定位的，那么当我们给他们的上下左右赋值的时候一定要注意数据的大小。在绝对定位的时候，他的像素赋值要根据网页的实际尺寸，按照自己的需求来设置。

我们通常使用的是float来设置浮动， margin，border属性，margin是配置图片和文本的距离。浮动元素配置成功，是排除在正常流动之外的。因为浮动，也可能导致整页面的不美观，所以我们需要清除浮动来更好的控制我们的布局。除了用clear，overflow也可以达到清除的效果。