11 1定位与布局的基本属性 1.3浮动布局 a float 网页的布局主要通过 float属性来实现, float属性定乂元素在哪 个方向浮动。 属性值有以下四种情况 口left定义向左浮动。 口 right定义向右浮动 口none为 float属性的默认值,表示元素不浮动,并会显示在其在页面中 出现的位置。 口 inherit规定应该从父元素继承 float属性的值。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 float 网页的布局主要通过float属性来实现，float 属性定义元素在哪 个方向浮动。 属性值有以下四种情况： left定义向左浮动。 right定义向右浮动。 none为float属性的默认值，表示元素不浮动，并会显示在其在页面中 出现的位置。 inherit规定应该从父元素继承float属性的值。 11 1.3浮动布局
2 1定位与布局的基本属性 1.3浮动布局 口浮动元素特性 当一个元素被设置为浮动元素后,元素本身的属性会发生一些改变, 具体如下: 口空间的改变。 口位置的改变。 口布局环绕。 当元素被定义为浮动显示时,它会自动成为一个块状元素,相当于 定义了“ display: block;”。但是块级元素会自动伸张宽度,占据 行位置,且块级元素会附加换行符,所以在同一行内只能显示 个块级元素。而浮动元素虽然拥有块级元素的特性,但是它并没有 上述表现,这时它更像行内元素那样收缩显示。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 浮动元素特性 当一个元素被设置为浮动元素后，元素本身的属性会发生一些改变， 具体如下: 空间的改变。 位置的改变。 布局环绕。 当元素被定义为浮动显示时，它会自动成为一个块状元素，相当于 定义了“display:block;”。但是块级元素会自动伸张宽度，占据 一行位置，且块级元素会附加换行符，所以在同一行内只能显示一 个块级元素。而浮动元素虽然拥有块级元素的特性，但是它并没有 上述表现，这时它更像行内元素那样收缩显示。 12 1.3浮动布局
13 十 2 现场演示: 案例12-01:浮动元素的空间 案例12-02:浮动元素的位置 ■案例12-03:浮动元素的环绕 ■案例12-04:图文混排 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 13 现场演示： 案例12-01：浮动元素的空间 案例12-02：浮动元素的位置 案例12-03：浮动元素的环绕 案例12-04：图文混排
1定位与布局的基本属性 1.3浮动布局 a clear属性规定元素的哪一侧不允许存在其他浮动元素,属性值 有五种情况 ■left、 right、both 口left、 right、both分别规定在左侧不允许浮动元素、在右侧不允许浮 动元素和在左右两侧均不允许浮动元素。 ■none 口none为 clear元素的默认值,允许浮动元素出现在两侧。 inherit inherit规定应该从父元素继承 clear属性的值。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 clear属性规定元素的哪一侧不允许存在其他浮动元素，属性值 有五种情况： left、right、both left、right、both分别规定在左侧不允许浮动元素、在右侧不允许浮 动元素和在左右两侧均不允许浮动元素。 none none为clear元素的默认值，允许浮动元素出现在两侧。 inherit inherit规定应该从父元素继承clear属性的值。 14 1.3浮动布局
15 1定位与布局的基本属性 1.3浮动布局 口元素浮动以后,其所在的位置会被下方不浮动的元素填充掉, 而有些时候这样的填充会破坏页面布局, clear元素可以解决这 个问题。在不浮动元素中添加与浮动元素 float属性值相同的 clear属性值,会使不浮动元素显示在浮动元素的下边距边界之 口浮动元素也可以添加 clear属性,添加的 clear属性的属性值只 有和 float属性的属性值相同时才能起作用,即当元素向左浮动 时只能清除元素的左浮动,而不能将属性值设为清除右浮动。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 元素浮动以后，其所在的位置会被下方不浮动的元素填充掉， 而有些时候这样的填充会破坏页面布局，clear元素可以解决这 个问题。在不浮动元素中添加与浮动元素float属性值相同的 clear属性值，会使不浮动元素显示在浮动元素的下边距边界之 下。 浮动元素也可以添加clear属性，添加的clear属性的属性值只 有和float属性的属性值相同时才能起作用，即当元素向左浮动 时只能清除元素的左浮动，而不能将属性值设为清除右浮动。 15 1.3浮动布局