网站模板去哪下载,做旅行同业的网站,wordpress缩略图延时加载,免费个人网站自助建设1. 浮动
浮动#xff1a;使元素浮起来#xff0c;脱离文档流#xff0c;从而使盒子能够灵活的移动。
浮动的属性#xff1a; float 属性设置元素的浮动 可选值#xff1a; none 元素不浮动#xff0c;默认在文档流中排列#xff08;默认值#xff09; left 元素向左移…1. 浮动
浮动使元素浮起来脱离文档流从而使盒子能够灵活的移动。
浮动的属性 float 属性设置元素的浮动 可选值 none 元素不浮动默认在文档流中排列默认值 left 元素向左移动 right 元素向右移动
浮动的特点 浮动元素会脱离文档流 脱离文档流的控制从而使盒子更灵活的移动浮动元素不会保留原来的位置 浮动元素将具有行内块元素的特点 无论是块元素还是行内元素都可以设置浮动浮动后将具有行内块元素的特点块元素设置浮动后大小根据内容决定行内元素设置浮动不需要通过display转换为块就可以设置宽度和高度 浮动的盒子会一行显示并且顶部对齐 多个盒子设置了浮动他们会一行显示并且顶部对齐浮动元素互相贴靠在一起没有缝隙如果父元素宽度不能容纳这些盒子 多出的盒子会另起一行对齐显示
浮动的应用 1. 浮动元素目的就是为了让盒子横向水平排列完成水平方向的布局 2. 浮动元素不会盖住文字文字会自动环绕在浮动元素的周围
浮动的注意 1. 浮动元素无法超越文档流的块元素 2. 浮动元素只会影响后面文档流中的元素不会影响前面文档流的盒子
示例如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlefloating/titlediv {width: 200px;height: 200px;}.box1 {background-color: #c7edcc;}.box2 {background-color: #fde6e0;float: left;}.box3 {background-color: #dce2f1;float: left;}span {background-color: yellowgreen;width: 100px;height: 100px;float: left;}
/headbodydiv classbox1/divdiv classbox2我是div/divdiv classbox3/divspan我是span1/spanspan我是span2/spanspan我是span3/spanspan我是span4/span
/body/html
