{"id":34188,"date":"2022-05-18T18:27:45","date_gmt":"2022-05-18T18:27:45","guid":{"rendered":"https:\/\/quera.org\/blog\/?p=34188"},"modified":"2025-03-02T16:01:56","modified_gmt":"2025-03-02T12:31:56","slug":"float-in-css","status":"publish","type":"post","link":"https:\/\/quera.org\/blog\/float-in-css\/","title":{"rendered":"\u062e\u0627\u0635\u06cc\u062a Float \u062f\u0631 CSS"},"content":{"rendered":"\n

\u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0627\u0632 \u062e\u0627\u0635\u06cc\u062a Float \u062f\u0631 CSS<\/strong> \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06a9\u0627\u0646 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 \u0628\u0647 \u0633\u0645\u062a \u0686\u067e \u06cc\u0627 \u0631\u0627\u0633\u062a\u0650 \u0627\u0644\u0645\u0627\u0646\u0650 \u067e\u062f\u0631 \u062e\u0648\u062f \u0634\u0646\u0627\u0648\u0631 \u0634\u0648\u0646\u062f. <\/p>\n\n\n\n

\u062f\u0631 \u06af\u0630\u0634\u062a\u0647\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 Flex \u0648 Grid \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0634\u062a \u06cc\u0627 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627\u06cc \u06a9\u0645\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u062f\u0648 \u0648\u06cc\u0698\u06af\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0631\u062f\u0646\u062f\u060c \u0637\u0631\u0627\u062d\u0627\u0646 \u0648\u0628 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc Float \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647\u200c\u0622\u0631\u0627\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0631\u062f\u0646\u062f \u0648 layout \u067e\u06cc\u062c \u0631\u0627 \u0645\u06cc\u200c\u0633\u0627\u062e\u062a\u0646\u062f\u060c \u0627\u0645\u0627 \u0628\u0627 \u0622\u0645\u062f\u0646 Grid \u0648 Flex\u060c \u062f\u06cc\u06af\u0631 Float \u062f\u0631 \u0635\u0641\u062d\u0647\u200c\u0622\u0631\u0627\u06cc\u06cc \u06a9\u0645\u0631\u0646\u06af \u0634\u062f. \u0627\u0644\u0628\u062a\u0647 \u0647\u0645\u0686\u0646\u0627\u0646 Float \u0628\u0647 \u06a9\u0627\u0631\u0645\u0627\u0646 \u0645\u06cc\u200c\u0622\u06cc\u062f \u0648 \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u0647\u0633\u062a \u06a9\u0647 \u0628\u0627 Float \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645 \u06a9\u0647 \u0628\u0627 Flex \u0648 Grid \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f.<\/p>\n\n\n\n

\u0648\u06cc\u0698\u06af\u06cc float \u0645\u0642\u0627\u062f\u06cc\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u0631\u0648\u062f\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f:<\/p>\n\n\n\n

float: none; \/* \u0645\u0642\u062f\u0627\u0631 \u067e\u06cc\u0634\u0641\u0631\u0636 *\/\nfloat: right;\nfloat: left;\nfloat: inherit;\n<\/code><\/pre>\n\n\n\n
\u062d\u0627\u0644\u0627 \u0628\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0627\u06af\u0631 \u0628\u0647 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 float \u0631\u0627\u0633\u062a \u06cc\u0627 \u0686\u067e \u0628\u062f\u0647\u06cc\u0645 \u0686\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u0645\u06cc\u200c\u0627\u0641\u062a\u062f. \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0646\u06af\u0647\u200c\u062f\u0627\u0631\u0646\u062f\u0647 (container) \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u062f\u0627\u062e\u0644\u0634 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 div<\/code> \u0628\u0627 width \u0648 height \u0628\u0631\u0627\u0628\u0631 \u0628\u0627 200 \u067e\u06cc\u06a9\u0633\u0644 \u0627\u0633\u062a. \u0648 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u062e\u0648\u062f\u060c \u06cc\u06a9 \u062a\u06af p<\/code> \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0627\u062e\u0644\u0634 \u0686\u0646\u062f \u062e\u0637\u06cc \u0645\u062a\u0646 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.<\/p>\n\n\n\n
 \u0628\u0647 \u062a\u06a9\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
<div id=\"container\">\n\t<div id=\"box\" style=\"width:200px; height:200px; background-color:red;\"><\/div>\n\t<p id=\"text\">\nIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as thei\nIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as thei\nIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as thei\n\t<\/p>\n<\/div>\n<\/code><\/pre>\n\n\n\n
\"\"
\u062e\u0631\u0648\u062c\u06cc \u06a9\u062f \u0628\u0627\u0644\u0627<\/figcaption><\/figure>\n\n\n\n
\u0628\u0631 \u062e\u0644\u0627\u0641 flex \u0648 grid \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0631\u0648\u06cc \u0627\u0644\u0645\u0627\u0646 \u0646\u06af\u0647\u200c\u062f\u0627\u0631\u0646\u062f\u0647 \u0627\u0639\u0645\u0627\u0644 \u0634\u0648\u0646\u062f\u060c float \u0631\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 \u062e\u0648\u062f \u0639\u0646\u0627\u0635\u0631 \u062f\u0627\u062e\u0644\u06cc \u0628\u062f\u0647\u06cc\u0645. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 \u0627\u06af\u0631 \u0645\u0642\u062f\u0627\u0631 float \u0628\u0627\u06a9\u0633 \u0642\u0631\u0645\u0632 \u0631\u0627 left \u0642\u0631\u0627\u0631 \u0628\u062f\u0647\u06cc\u0645 \u062e\u0631\u0648\u062c\u06cc \u0645\u0627\u0646\u0646\u062f \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n\n\n\n
#box { float:left; }\n<\/code><\/pre>\n\n\n\n
\"\"
\u062e\u0631\u0648\u062c\u06cc \u0628\u0639\u062f \u0627\u0632 \u0627\u0639\u0645\u0627\u0644 float:left \u0631\u0648\u06cc \u0628\u0627\u06a9\u0633 \u0642\u0631\u0645\u0632<\/figcaption><\/figure>\n\n\n\n
\u062f\u0631 \u0648\u0627\u0642\u0639 \u0628\u0627 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc\u060c \u06a9\u0627\u0631\u06cc \u06a9\u0631\u062f\u06cc\u0645 \u06a9\u0647 \u0628\u0627\u06a9\u0633 \u0642\u0631\u0645\u0632 \u0628\u0647 \u0633\u0645\u062a \u0686\u067e \u0634\u0646\u0627\u0648\u0631 \u0628\u0634\u0648\u062f. \u0648 \u0645\u062a\u0646 \u0647\u0645 \u062f\u0631 \u0627\u062f\u0627\u0645\u0647\u0654 \u0622\u0646 \u0628\u0627\u06a9\u0633 \u0642\u0631\u0645\u0632 \u0628\u06cc\u0627\u06cc\u062f\u060c \u062d\u0627\u0644 \u0627\u06af\u0631 \u0628\u0647 \u0628\u0627\u06a9\u0633 \u0642\u0631\u0645\u0632\u060c float \u0631\u0627\u0633\u062a \u0628\u062f\u0647\u06cc\u0645 \u0628\u0647 \u062e\u0631\u0648\u062c\u06cc \u0632\u06cc\u0631 \u0645\u06cc\u200c\u0631\u0633\u06cc\u0645:<\/p>\n\n\n\n
#box { float:right; }\n<\/code><\/pre>\n\n\n\n
\"\"
\u062e\u0631\u0648\u062c\u06cc \u0628\u0639\u062f \u0627\u0632 \u0627\u0639\u0645\u0627\u0644 float:right \u0631\u0648\u06cc \u0628\u0627\u06a9\u0633 \u0642\u0631\u0645\u0632<\/figcaption><\/figure>\n\n\n\n
\u067e\u0633 \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u0644\u06cc \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631\u060c \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc float \u0628\u0647 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0647\u0648\u0644 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f (float: right) \u0645\u062d\u062a\u0648\u0627\u06cc \u0628\u0639\u062f \u0627\u0632 \u0622\u0646 \u062f\u0648\u0631 \u0644\u0628\u0647\u0654 \u0686\u067e\u0650 \u0639\u0646\u0635\u0631 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f \u0648 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0639\u0646\u0635\u0631\u060c \u0628\u0627 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0633\u0645\u062a \u0686\u067e \u0647\u0648\u0644 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f (float: left) \u0645\u062d\u062a\u0648\u0627\u06cc \u0628\u0639\u062f \u0627\u0632 \u0622\u0646 \u062f\u0648\u0631 \u0644\u0628\u0647\u0654 \u0631\u0627\u0633\u062a\u0650 \u0639\u0646\u0635\u0631 \u062c\u0645\u0639 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n
\u0647\u0645\u0686\u0646\u06cc\u0646 \u0648\u0642\u062a\u06cc \u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 block (\u0627\u0644\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0639\u0631\u0636 \u06a9\u0644 \u0635\u0641\u062d\u0647 \u06cc\u0627 \u0645\u062d\u062f\u0648\u062f\u0647\u200c\u0627\u06cc \u06a9\u0647 \u0647\u0633\u062a \u0631\u0627 \u0627\u0634\u063a\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f) \u0648\u06cc\u0698\u06af\u06cc float \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645\u060c \u062f\u06cc\u06af\u0631 \u06a9\u0644 \u0639\u0631\u0636 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0627\u0634\u063a\u0627\u0644 \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0648 \u0639\u0631\u0636 \u0622\u0646 \u0641\u0642\u0637 \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647\u0654 \u0645\u062d\u062a\u0648\u0627\u06cc \u062e\u0648\u062f\u0634 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u0648 \u0646\u0647 \u0628\u06cc\u0634\u062a\u0631.<\/p>\n\n\n\n
\u0635\u0641\u062d\u0647\u200c\u0622\u0631\u0627\u06cc\u06cc \u0628\u0627 \u06a9\u0645\u06a9 float<\/h2>\n\n\n\n
\u0647\u0645\u0627\u0646\u200c\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u06af\u0641\u062a\u06cc\u0645 \u0642\u0628\u0644 \u0627\u0632 \u0628\u0647 \u0648\u062c\u0648\u062f \u0622\u0645\u062f\u0646 flex \u0648 grid\u060c \u0635\u0641\u062d\u0647\u200c\u0622\u0631\u0627\u06cc\u06cc \u0648 \u0644\u0627\u06cc\u0647\u200c\u0628\u0646\u062f\u06cc \u0628\u0647 \u06a9\u0645\u06a9 float \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u062f. \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0635\u0641\u062d\u0647\u200c\u0622\u0631\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0627 float \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a \u0631\u0627 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u0645.<\/p>\n\n\n\n
<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <link rel=\"stylesheet\" href=\"styles.css\">\n  <title>Float<\/title>\n<\/head>\n<body>\n  <div id=\"container\">\n    <header class=\"header\">Header<\/header>\n    <div class=\"wrapper\">\n        <main class=\"main\">Main<\/main>\n        <aside class=\"aside\">Aside<\/aside>\n    <\/div>\n    <footer class=\"footer\">Footer<\/footer>\n  <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
.container {\n  min-height: 100vh;\n}\n.header {\n  background-color: red;\n  color: #fff;\n  height: 70px;\n}\n.wrapper {\n  overflow: hidden;\n}\n.main {\n  width: 70%;\n  background-color: #ccc;\n  height: calc(100vh - 160px);\n  float: left;\n}\n.aside {\n  width: 30%;\n  float: right;\n  background-color: blue;\n  height: calc(100vh - 160px);\n  color: #fff;\n}\n.footer {\n  background-color: green;\n  color: #fff;\n  height: 70px;\n}\n<\/code><\/pre>\n\n\n\n
\"\"
\u062e\u0631\u0648\u062c\u06cc \u06a9\u062f \u0635\u0641\u062d\u0647\u200c\u0622\u0631\u0627\u06cc\u06cc \u0628\u0627 float<\/figcaption><\/figure>\n\n\n\n
\u062f\u0631 \u0642\u0633\u0645\u062a css \u062f\u0631 \u06a9\u062f\u0647\u0627\u06cc \u0628\u0627\u0644\u0627\u060c \u0686\u0646\u062f\u06cc\u0646 \u062e\u0637 \u06a9\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0647 \u0646\u0638\u0631 \u063a\u06cc\u0631\u0645\u0646\u0637\u0642\u06cc \u0647\u0633\u062a\u0646\u062f\u060c \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u0686\u0631\u0627 \u0628\u0627\u06cc\u062f \u0627\u0644\u0645\u0627\u0646 div \u0628\u0627 \u06a9\u0644\u0627\u0633 wrapper \u062f\u0627\u0631\u0627\u06cc overflow:hidden;<\/code> \u0628\u0627\u0634\u062f\u061f \u0627\u06cc\u0646\u060c \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0634\u06a9\u0644\u0627\u062a float \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u0647 \u0622\u0646 \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\u060c \u0648\u0644\u06cc \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u0644\u06cc \u0622\u06cc\u0627 \u0628\u0627 \u0648\u062c\u0648\u062f flex \u0648 grid\u060c \u06a9\u0627\u0631 \u062f\u0631\u0633\u062a\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 float \u0635\u0641\u062d\u0647\u200c\u0622\u0631\u0627\u06cc\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645\u061f \u0642\u0637\u0639\u0627\u064b \u062c\u0648\u0627\u0628 \u0645\u0646\u0641\u06cc \u0627\u0633\u062a\u060c float \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647\u200c\u0622\u0631\u0627\u06cc\u06cc \u0645\u0646\u0627\u0633\u0628 \u0646\u06cc\u0633\u062a\u060c \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0645\u062f\u062a\u06cc \u0628\u0639\u062f \u0645\u0641\u0627\u0647\u06cc\u0645\u06cc \u06a9\u0647 \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc \u0622\u0646\u0647\u0627 \u0635\u0641\u062d\u0647\u200c\u0622\u0631\u0627\u06cc\u06cc \u0628\u0648\u062f \u0645\u0639\u0631\u0641\u06cc \u0634\u062f\u0646\u062f. \u0645\u0641\u0627\u0647\u06cc\u0645\u06cc \u0645\u062b\u0644 Flexbox \u0648 Grid \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0645\u0631\u0627\u062c\u0639\u0647 \u0628\u0647 \u062f\u0648\u0631\u0647\u200c\u06cc \u0622\u0645\u0648\u0632\u0634 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f<\/a> \u06a9\u0648\u0626\u0631\u0627 \u06a9\u0627\u0644\u062c \u0627\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645 \u0631\u0627 \u0641\u0631\u0627 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n\n\n\n
\u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u06cc \u0645\u0637\u0644\u0628 \u06af\u0641\u062a\u0647 \u0628\u0648\u062f\u06cc\u0645 \u06a9\u0647 float \u06a9\u0627\u0631\u06cc \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f \u06a9\u0647 \u0622\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 flex \u0648 grid \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f. \u0627\u06af\u0631 \u062f\u0631 \u0637\u0631\u062d\u06cc \u0646\u06cc\u0627\u0632 \u0628\u0627\u0634\u062f \u0634\u0645\u0627 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u0646\u0645\u0648\u0646\u0647\u0654 \u0632\u06cc\u0631 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0622\u06cc\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 flex \u06cc\u0627 grid \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061f \u062e\u06cc\u0631\u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0641\u0642\u0637 \u0628\u0627 float \u0627\u0645\u06a9\u0627\u0646\u200c\u067e\u0630\u06cc\u0631 \u0627\u0633\u062a.<\/p>\n\n\n
\n
\"\"
\u0637\u0631\u062d\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 float \u0627\u0633\u062a<\/figcaption><\/figure>\n<\/div>\n\n\n
\u067e\u0633 \u062a\u0627 \u0627\u06cc\u0646\u062c\u0627 \u062a\u0641\u0627\u0648\u062a \u0645\u0641\u0647\u0648\u0645\u06cc \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u06cc\u0646 float \u0648  grid \/ flex \u0631\u0627 \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u06cc\u0645 \u0648 \u0641\u0647\u0645\u06cc\u062f\u06cc\u0645 \u0627\u0632 \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0628\u0627\u06cc\u062f \u062f\u0631 \u062c\u0627\u06cc \u0645\u0646\u0627\u0633\u0628 \u062e\u0648\u062f\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\n\n\n\n
\u0645\u0634\u06a9\u0644\u0627\u062a float<\/h2>\n\n\n\n
\u062f\u0631 \u0645\u062b\u0627\u0644 \u0642\u0628\u0644\u06cc \u0628\u0627 \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0634\u06a9\u0644\u0627\u062a  float \u0622\u0634\u0646\u0627 \u0634\u062f\u06cc\u0645 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u062f\u0648\u0646 \u062f\u0644\u06cc\u0644 \u062e\u0627\u0635\u06cc \u0627\u0632 overflow:hidden;<\/code> \u0628\u0631\u0627\u06cc \u0639\u0646\u0635\u0631 \u0646\u06af\u0647\u200c\u062f\u0627\u0631\u0646\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645\u060c \u062f\u0631 \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0642\u0631\u0627\u0631 \u0627\u0633\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u06cc\u0632\u0628\u06cc\u0646\u0627\u0646\u0647\u200c\u062a\u0631\u06cc \u0645\u0634\u06a9\u0644\u0627\u062a float \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n\n\n\n
\u0645\u0634\u06a9\u0644 \u0627\u0648\u0644:\u200c<\/strong> \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646\u0650 \u0646\u06af\u0647\u200c\u062f\u0627\u0631\u0646\u062f\u0647 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u062f\u0631\u0648\u0646 \u062e\u0648\u062f\u0634 \u0633\u0647 \u0627\u0644\u0645\u0627\u0646 \u062f\u0627\u0631\u062f \u0648 \u0627\u06cc\u0646 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 \u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u0634\u062e\u0635\u06cc \u062f\u0627\u0631\u0646\u062f\u060c \u0645\u0634\u06a9\u0644\u06cc \u06a9\u0647 \u067e\u06cc\u0634 \u0645\u06cc\u200c\u0622\u06cc\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0639\u0646\u0635\u0631 \u0646\u06af\u0647\u200c\u062f\u0627\u0631\u0646\u062f\u0647 \u0627\u0631\u062a\u0641\u0627\u0639 \u0639\u0646\u0627\u0635\u0631 \u0641\u0631\u0632\u0646\u062f \u0631\u0648 \u0628\u0647 \u062e\u0648\u062f\u0634 \u0646\u0645\u06cc\u200c\u06af\u06cc\u0631\u062f \u0648 \u06af\u0648\u06cc\u0627 \u0627\u0644\u0645\u0627\u0646\u06cc \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f\u0634 \u062c\u0627 \u0646\u062f\u0627\u062f\u0647 \u0627\u0633\u062a \u0648 \u0627\u0631\u062a\u0641\u0627\u0639\u0634 \u0635\u0641\u0631 \u0627\u0633\u062a. \u0628\u0647 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
 <\/p>\n\n\n\n
<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <link rel=\"stylesheet\" href=\"styles.css\">\n  <title>Float<\/title>\n<\/head>\n<body>\n  <div id=\"container\">\n    <Div class=\"box red\"><\/Div>\n    <Div class=\"box blue\"><\/Div>\n    <Div class=\"box green\"><\/Div>\n  <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
#container {\n  border: 2px solid black;\n}\n.box {\n  width: 200px;\n  height: 200px;\n  float: left;\n}\n.red {\n  background-color: red;\n}\n.blue {\n  background-color: blue;\n}\n.green {\n  background-color: green;\n}\n<\/code><\/pre>\n\n\n\n
\u0628\u0627 \u06a9\u062f \u0647\u0627\u06cc \u0628\u0627\u0644\u0627 \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0631\u06cc\u0645 \u062e\u0631\u0648\u062c\u06cc \u0628\u0631\u0627\u0628\u0631\u0628\u0627\u0634\u0647 \u0628\u0627 <\/p>\n\n\n\n
\"\"
\u0627\u0646\u062a\u0638\u0627\u0631 \u0645\u0627 \u0627\u0632 \u06a9\u062f \u0628\u0627\u0644\u0627<\/figcaption><\/figure>\n\n\n\n
\u0648\u0644\u06cc \u062e\u0631\u0648\u062c\u06cc \u062f\u0631 \u0648\u0627\u0642\u0639\u06cc\u062a \u0628\u0631\u0627\u0628\u0631\u0647 \u0628\u0627 :<\/p>\n\n\n\n
\"\"
\u0648\u0627\u0642\u0639\u06cc\u062a \u062e\u0631\u0648\u062c\u06cc \u06a9\u062f \u0628\u0627\u0644\u0627 (\u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0631\u062a\u0641\u0627\u0639 \u0646\u06af\u0647\u200c\u062f\u0627\u0631\u0646\u062f\u0647 \u0635\u0641\u0631 \u0627\u0633\u062a)<\/figcaption><\/figure>\n\n\n\n
\u0647\u0645\u0627\u0646\u200c\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f \u0627\u0644\u0645\u0627\u0646 \u0648\u0627\u0644\u062f \u0627\u0631\u062a\u0641\u0627\u0639 \u0641\u0631\u0632\u0646\u062f\u0627\u0646 \u062e\u0648\u062f \u0631\u0627 \u0646\u06af\u0631\u0641\u062a\u0647\u060c \u0627\u0645\u0627 \u0631\u0627\u0647 \u200c\u062d\u0644 \u0686\u06cc\u0633\u062a \u0648 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 \u0631\u0627 \u062d\u0644 \u06a9\u0646\u06cc\u0645\u061f<\/p>\n\n\n\n
\u0645\u0634\u06a9\u0644 \u062f\u0648\u0645:<\/strong> \u062f\u0648\u0645\u06cc\u0646 \u0645\u0634\u06a9\u0644\u06cc \u06a9\u0647 float \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u0634\u0646\u0627\u0648\u0631 \u0627\u0633\u062a\u060c \u0631\u0648\u06cc \u0639\u0646\u0627\u0635\u0631 \u0628\u0639\u062f\u06cc \u062f\u0631 \u0646\u06af\u0647\u200c\u062f\u0627\u0631\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0647\u0645 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f \u0648 \u0628\u0627 \u0647\u0645 \u062a\u062f\u0627\u062e\u0644 \u067e\u06cc\u062f\u0627 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u062d\u062a\u06cc\u0670 \u0628\u0631 \u0631\u0648\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0622\u0646\u0647\u0627 \u062a\u0623\u062b\u06cc\u0631 \u0645\u06cc\u200c\u06af\u0630\u0627\u0631\u062f. \u0628\u0647 \u06a9\u062f\u0647\u0627 \u0648 \u062e\u0631\u0648\u062c\u06cc \u0632\u06cc\u0631 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <link rel=\"stylesheet\" href=\"styles.css\">\n  <title>Float<\/title>\n<\/head>\n<body>\n  <div id=\"container\">\n    <Div class=\"box red\"><\/Div>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi harum exercitationem, mollitia nam voluptatum soluta iste, adipisci labore ut, quas suscipit ex architecto. Nam voluptate omnis quas necessitatibus? Natus, quae.<\/p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi harum exercitationem, mollitia nam voluptatum soluta iste, adipisci labore ut, quas suscipit ex architecto. Nam voluptate omnis quas necessitatibus? Natus, quae.<\/p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi harum exercitationem, mollitia nam voluptatum soluta iste, adipisci labore ut, quas suscipit ex architecto. Nam voluptate omnis quas necessitatibus? Natus, quae.<\/p>\n  <\/div>\n  <div id=\"container\" class=\"yellow\">\n    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione temporibus suscipit, autem architecto voluptatum repellat atque alias repellendus harum consectetur, mollitia, laborum beatae nisi consequuntur quibusdam esse natus eum dolor?<\/p>\n  <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
#container {\n  border: 2px solid black;\n}\n.box {\n  width: 200px;\n  height: 200px;\n  float: left;\n}\n.red {\n  background-color: red;\n}\n.yellow {\n  background-color: yellow;\n}\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u0627\u06cc\u0646 \u062f\u0648 \u0645\u0634\u06a9\u0644 float \u0631\u0627\u0647 \u062d\u0644 \u06cc\u06a9\u0633\u0627\u0646 \u062f\u0627\u0631\u0646\u062f \u0648 \u0628\u0627 \u0631\u0641\u0639\u200c\u06a9\u0631\u062f\u0646 \u0645\u0634\u06a9\u0644 \u0627\u0648\u0644\u060c \u0645\u0634\u06a9\u0644 \u062f\u0648\u0645 \u0646\u06cc\u0632 \u0631\u0641\u0639 \u0645\u06cc\u200c\u0634\u0648\u062f. <\/p>\n\n\n\n
\u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u0645\u0634\u06a9\u0644\u0627\u062a float:<\/h3>\n\n\n\n
\u0627\u0648\u0644\u06cc\u0646 \u0631\u0627\u0647 \u062d\u0644\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062d\u0644 \u0645\u0634\u06a9\u0644 float \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0639\u0646\u0635\u0631 \u067e\u062f\u0631 (\u0639\u0646\u0635\u0631 \u0646\u06af\u0647\u200c\u062f\u0627\u0631\u0646\u062f\u0647)\u060c \u0648\u06cc\u0698\u06af\u06cc overflow \u0631\u0627 \u0628\u0631\u0627\u0628\u0631 hidden \u0648 \u06cc\u0627 auto \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0686\u0646\u062f\u0627\u0646 \u062f\u0631\u0633\u062a\u06cc \u0646\u06cc\u0633\u062a. \u0686\u0631\u0627 \u06a9\u0647 \u0628\u0647 \u0647\u0631 \u062f\u0644\u06cc\u0644\u06cc\u060c \u0634\u0627\u06cc\u062f \u062f\u0648\u0633\u062a \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 overflow \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f\u060c \u0628\u0631\u0627\u0628\u0631 hidden \u0648 \u06cc\u0627 auto \u0628\u0627\u0634\u062f.<\/p>\n\n\n\n
\u0631\u0627\u0647 \u062d\u0644 \u062f\u0648\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0627\u0636\u0627\u0641\u0647 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0622\u062e\u0631\u06cc\u0646 \u0641\u0631\u0632\u0646\u062f \u0627\u0644\u0645\u0627\u0646 \u0646\u06af\u0647\u200c\u062f\u0627\u0631\u0646\u062f\u0647 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645 \u0648 \u0648\u06cc\u0698\u06af\u06cc clear \u0622\u0646 \u0627\u0644\u0645\u0627\u0646 \u0631\u0627 \u0628\u0631\u0627\u0628\u0631 both \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645. \u067e\u0633 \u0628\u0631\u0627\u06cc \u062d\u0644 \u0645\u0634\u06a9\u0644 \u0627\u0648\u0644 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u0627\u0644\u0645\u0627\u0646 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc \u0627\u0644\u0645\u0627\u0646 \u0648\u0627\u0644\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n
<div style=\"clear: both;\"><\/div><\/code><\/pre>\n\n\n\n
\u0627\u0645\u0627 \u0627\u06cc\u0646 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0645 \u0631\u0627\u0647 \u062d\u0644 \u062e\u0648\u0628\u06cc \u0646\u06cc\u0633\u062a\u060c \u0628\u0647 \u0627\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u06a9\u0647 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0628\u06cc \u0645\u0639\u0646\u06cc \u0648 \u0627\u0636\u0627\u0641\u0647 \u0642\u0631\u0627\u0631 \u0627\u0633\u062a \u0628\u0647 \u0635\u0641\u062d\u0627\u062a \u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0634\u0648\u062f.<\/p>\n\n\n\n
\u0648 \u0627\u0645\u0627 \u0631\u0627\u0647 \u062d\u0644 \u0622\u062e\u0631 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0627\u0647\u060c \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u062f\u0631 css \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645:<\/p>\n\n\n\n
.clearfix:after {\n  content: \" \";\n  display: block;\n  clear: both;\n}\n<\/code><\/pre>\n\n\n\n
\u0648 \u0633\u067e\u0633 \u0627\u06cc\u0646 \u06a9\u0644\u0627\u0633 (clearfix) \u0631\u0627 \u0628\u0647 \u0627\u0644\u0645\u0627\u0646 \u0646\u06af\u0647\u200c\u062f\u0627\u0631\u0646\u062f\u0647 \u0628\u062f\u0647\u06cc\u0645\u060c \u0628\u062f\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628 \u0646\u0647 \u0627\u0644\u0645\u0627\u0646 \u0627\u0636\u0627\u0641\u0647\u200c\u0627\u06cc \u062f\u0631 html \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0646\u0647 overflow \u0631\u0627 \u0628\u06cc\u200c\u062f\u0644\u06cc\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647\u200c\u0627\u06cc\u0645. \u0628\u062f\u06cc\u0646\u200c \u062a\u0631\u062a\u06cc\u0628 \u0647\u0631 \u062f\u0648 \u0645\u0634\u06a9\u0644 \u0630\u06a9\u0631\u0634\u062f\u0647 \u0628\u0631\u0627\u06cc float \u062d\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0627\u0632 \u062e\u0627\u0635\u06cc\u062a Float \u062f\u0631 CSS \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06a9\u0627\u0646 \u06cc\u06a9 \u0627\u0644\u0645\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 \u0628\u0647 \u0633\u0645\u062a…<\/p>\n","protected":false},"author":18,"featured_media":35619,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[321,46,48,79,298],"tags":[],"class_list":["post-34188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-developer","category-technology","category-frontend","category-plus"],"_links":{"self":[{"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/posts\/34188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/comments?post=34188"}],"version-history":[{"count":35,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/posts\/34188\/revisions"}],"predecessor-version":[{"id":36238,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/posts\/34188\/revisions\/36238"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/media\/35619"}],"wp:attachment":[{"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/media?parent=34188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/categories?post=34188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quera.org\/blog\/wp-json\/wp\/v2\/tags?post=34188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}