浮动特性应用实例
应用实例—图文绕排
-
总结:浮动脱离文档流不脱离文本流
-
最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐 要想图文环绕 需要给图片设置浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 500px; height: 500px; border:1px solid #333 } img{ float: left; } </style> </head> <body> <div class="box"> <img src="./images/pic_4.jpg" alt=""> 我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图介 </div> </body> </html>
应用实例—两列自适应
-
实现要点:单列定宽,单列自适应
-
浮动实现
-
左边的盒子固定宽度,添加float:left
-
右边盒子宽度自适应, 添加margin-left:左盒子宽度。
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ border: 1px solid #333; } .left{ width: 300px; height: 300px; background: red; float: left; } .right{ height:350px ; background: yellow; margin-left: 300px; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"> 我是文本内容</div> </div> </body> </html>